import { useState } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";

type Product = {
  id: string;
  name: string;
  image: string;
  botanicals: string[];
};

const products: Product[] = [
  {
    id: "glacier-lime",
    name: "Glacier Lime",
    image: "/assets/product-glacier-lime.webp",
    botanicals: ["Lime peel", "Juniper", "Arctic thyme"],
  },
  {
    id: "cloudberry",
    name: "Cloudberry",
    image: "/assets/product-cloudberry.webp",
    botanicals: ["Cloudberry", "Chamomile", "Rosehip"],
  },
  {
    id: "spruce-tip",
    name: "Spruce Tip",
    image: "/assets/product-spruce-tip.webp",
    botanicals: ["Spruce tip", "Angelica", "Black currant leaf"],
  },
];

const brand = {
  contact: "hello@fjora.example — Fjordgata 7, 9000 Tromsø",
  fictionalNotice: "Fjora is a fictional brand created for UIBenchmark.",
};

const tastingNotes: Record<string, string> = {
  "glacier-lime":
    "Bright lime peel opens the glass. Juniper brings a clean evergreen edge, with Arctic thyme on the cool finish.",
  cloudberry:
    "Cloudberry gives the first soft berry note. Chamomile adds a quiet floral lift, followed by the tart red-fruit character of rosehip.",
  "spruce-tip":
    "Spruce tip leads with a fresh, resinous note. Angelica adds earthy depth, while black currant leaf keeps the finish green.",
};

const faqItems = [
  {
    question: "Is Fjora sweetened?",
    answer: "No. Every Taste the North flavor is unsweetened, with no sugar and no sweeteners.",
  },
  {
    question: "Does Fjora contain caffeine?",
    answer: "No. All flavors in the line are caffeine-free.",
  },
  {
    question: "What is the bottle made from?",
    answer: "Each bottle is single-material glass with an aluminium cap. Both are widely recyclable.",
  },
  {
    question: "How often is Taste the North bottled?",
    answer: "Taste the North is the seasonal winter line. Its three flavors are bottled once per season.",
  },
  {
    question: "How long is the seasonal line available?",
    answer: "The line is sold seasonally while stock lasts.",
  },
];

function FjoraMark() {
  return (
    <span className="wordmark" aria-label="Fjora">
      <span className="wordmark-symbol" aria-hidden="true">
        <svg viewBox="0 0 32 32" role="presentation">
          <circle cx="16" cy="16" r="14.5" />
          <path d="M7.5 19.2c2.7-2.8 5.2-2.8 8.1 0 2.7 2.6 5.1 2.6 8.8-1.2" />
          <path d="M10.8 12.4h10.8M16.2 9.1v6.6" />
        </svg>
      </span>
      <span className="wordmark-name">Fjora</span>
    </span>
  );
}

function ArrowIcon() {
  return (
    <svg className="arrow-icon" viewBox="0 0 18 18" aria-hidden="true">
      <path d="M2 9h13M10 4l5 5-5 5" />
    </svg>
  );
}

function App() {
  const [selectedId, setSelectedId] = useState(products[0].id);
  const [menuOpen, setMenuOpen] = useState(false);
  const [openFaqs, setOpenFaqs] = useState<Set<number>>(() => new Set());

  const selectedProduct = products.find((product) => product.id === selectedId) ?? products[0];
  const selectedIndex = products.findIndex((product) => product.id === selectedProduct.id);

  const toggleFaq = (index: number) => {
    setOpenFaqs((current) => {
      const next = new Set(current);
      if (next.has(index)) {
        next.delete(index);
      } else {
        next.add(index);
      }
      return next;
    });
  };

  const closeMenu = () => setMenuOpen(false);

  return (
    <div className="site-shell">
      <header className={`site-header${menuOpen ? " menu-is-open" : ""}`}>
        <div className="header-inner">
          <a className="brand-link" href="#top" onClick={closeMenu}>
            <FjoraMark />
          </a>
          <span className="header-season">Taste the North <span>/</span> 01</span>
          <nav className="desktop-nav" aria-label="Primary navigation">
            <a href="#flavors">Flavors</a>
            <a href="#story">Our story</a>
            <a href="#faq">Questions</a>
          </nav>
          <button
            className="menu-toggle"
            type="button"
            aria-expanded={menuOpen}
            aria-controls="mobile-navigation"
            onClick={() => setMenuOpen((open) => !open)}
          >
            <span className="menu-toggle-label">Menu</span>
            <span className="menu-toggle-icon" aria-hidden="true">
              <span />
              <span />
            </span>
          </button>
          <nav
            className="mobile-nav"
            id="mobile-navigation"
            aria-label="Mobile navigation"
            hidden={!menuOpen}
          >
            <a href="#flavors" onClick={closeMenu}>Flavors <ArrowIcon /></a>
            <a href="#story" onClick={closeMenu}>Our story <ArrowIcon /></a>
            <a href="#faq" onClick={closeMenu}>Questions <ArrowIcon /></a>
          </nav>
        </div>
      </header>

      <main>
        <section className="hero" id="top" aria-labelledby="hero-title">
          <div className="hero-copy">
            <div className="hero-copy-inner">
              <p className="eyebrow eyebrow-light">
                <span className="eyebrow-rule" aria-hidden="true" />
                Seasonal winter line
              </p>
              <h1 id="hero-title" className="hero-title">
                <span>Taste</span>
                <span className="hero-title-small">the</span>
                <span>North</span>
              </h1>
              <p className="hero-intro">
                Botanical sparkling water shaped by glacial meltwater and cold-steeped botanicals.
              </p>
              <a className="primary-cta" href="#flavors">
                Meet the three flavors
                <ArrowIcon />
              </a>
            </div>
            <div className="hero-facts" aria-label="Fjora at a glance">
              <div>
                <span className="hero-fact-number">01</span>
                <span>Glacial<br />meltwater</span>
              </div>
              <div>
                <span className="hero-fact-number">02</span>
                <span>Cold-steeped<br />botanicals</span>
              </div>
              <div>
                <span className="hero-fact-number">03</span>
                <span>Bottled once<br />per season</span>
              </div>
            </div>
          </div>
          <div className="hero-visual">
            <img src="/assets/hero-fjord.webp" alt="A quiet fjord beneath a pale northern sky" />
            <div className="hero-visual-wash" aria-hidden="true" />
            <div className="hero-coordinate" aria-hidden="true">69° 39′ N&nbsp; / &nbsp;18° 57′ E</div>
            <div className="hero-caption">
              <span>Fjordgata 7</span>
              <span>Tromsø, Norway</span>
            </div>
            <div className="hero-sun" aria-hidden="true" />
          </div>
        </section>

        <section className="section flavors-section" id="flavors" aria-labelledby="flavor-heading">
          <div className="content-width">
            <div className="section-heading flavor-heading">
              <div>
                <p className="eyebrow eyebrow-dark"><span>01</span> Seasonal tasting</p>
                <h2 id="flavor-heading">Three ways to taste the North.</h2>
              </div>
              <p className="section-lead">
                Choose a bottle to follow its botanical profile. The line is bottled once per season.
              </p>
            </div>

            <div className="flavor-picker" role="group" aria-label="Choose a seasonal flavor">
              {products.map((product, index) => {
                const isSelected = product.id === selectedProduct.id;
                return (
                  <button
                    className={`flavor-option${isSelected ? " is-selected" : ""}`}
                    type="button"
                    key={product.id}
                    aria-pressed={isSelected}
                    onClick={() => setSelectedId(product.id)}
                  >
                    <span className="flavor-option-image">
                      <img src={product.image} alt={`${product.name} bottle`} />
                      <span className="flavor-option-index">0{index + 1}</span>
                    </span>
                    <span className="flavor-option-meta">
                      <span className="flavor-option-name">{product.name}</span>
                      <span className="flavor-option-action">{isSelected ? "Selected" : "Taste this"}<ArrowIcon /></span>
                    </span>
                  </button>
                );
              })}
            </div>

            <div className="flavor-detail" aria-live="polite">
              <div className="detail-image">
                <img src={selectedProduct.image} alt={`${selectedProduct.name} bottle, selected flavor`} />
                <span className="detail-image-index">0{selectedIndex + 1} <span>/ 03</span></span>
                <span className="detail-image-label">Fjora / Taste the North</span>
              </div>
              <div className="detail-copy">
                <p className="eyebrow eyebrow-light"><span>Now tasting</span> <i aria-hidden="true" /></p>
                <h3>{selectedProduct.name}</h3>
                <p className="detail-intro">A clear botanical profile for a cold, quiet pause.</p>
                <div className="botanical-block">
                  <p className="detail-label">Botanicals</p>
                  <ul className="botanical-list">
                    {selectedProduct.botanicals.map((botanical) => (
                      <li key={botanical}>{botanical}</li>
                    ))}
                  </ul>
                </div>
                <div className="tasting-note">
                  <span className="tasting-note-mark" aria-hidden="true">“</span>
                  <div>
                    <p className="detail-label">Tasting note</p>
                    <p>{tastingNotes[selectedProduct.id]}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="section story-section" id="story" aria-labelledby="story-heading">
          <div className="content-width story-layout">
            <div className="story-media">
              <img src="/assets/story-botanicals.webp" alt="Close-up of botanicals and berries" />
              <span className="story-media-label">Field notes <span>/</span> 02</span>
              <span className="story-media-caption">Cold-steeped botanicals</span>
            </div>
            <div className="story-copy">
              <p className="eyebrow eyebrow-light"><span>02</span> The Fjora way</p>
              <h2 id="story-heading">A clear taste of where we come from.</h2>
              <p className="story-lead">
                Fjora begins with a Nordic origin story: glacial meltwater and botanicals cold-steeped until their character is clear.
              </p>
              <p>
                Taste the North is our seasonal winter line. Three flavors, bottled once per season. A small portrait of the north, drawn in lime peel, cloudberry, spruce tip, and the botanicals alongside them.
              </p>
              <div className="story-facts">
                <div>
                  <span className="story-fact-number">01</span>
                  <strong>Origin</strong>
                  <span>Nordic</span>
                </div>
                <div>
                  <span className="story-fact-number">02</span>
                  <strong>Method</strong>
                  <span>Cold-steeped</span>
                </div>
                <div>
                  <span className="story-fact-number">03</span>
                  <strong>Rhythm</strong>
                  <span>Once per season</span>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="section faq-section" id="faq" aria-labelledby="faq-heading">
          <div className="content-width faq-layout">
            <div className="faq-intro">
              <p className="eyebrow eyebrow-dark"><span>03</span> Good to know</p>
              <h2 id="faq-heading">The clear answers.</h2>
              <p>Short notes on the seasonal line.</p>
            </div>
            <div className="faq-list">
              {faqItems.map((item, index) => {
                const isOpen = openFaqs.has(index);
                const answerId = `faq-answer-${index}`;
                const questionId = `faq-question-${index}`;
                return (
                  <div className={`faq-item${isOpen ? " is-open" : ""}`} key={item.question}>
                    <button
                      className="faq-question"
                      type="button"
                      id={questionId}
                      aria-expanded={isOpen}
                      aria-controls={answerId}
                      onClick={() => toggleFaq(index)}
                    >
                      <span className="faq-number">0{index + 1}</span>
                      <span>{item.question}</span>
                      <span className="faq-plus" aria-hidden="true"><span /><span /></span>
                    </button>
                    <div
                      className="faq-answer"
                      id={answerId}
                      role="region"
                      aria-labelledby={questionId}
                      hidden={!isOpen}
                    >
                      <p>{item.answer}</p>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </section>
      </main>

      <footer className="site-footer">
        <div className="content-width footer-top">
          <div className="footer-brand">
            <a className="brand-link" href="#top"><FjoraMark /></a>
            <p>Taste the North<br />Seasonal winter line</p>
          </div>
          <div className="footer-links">
            <p className="footer-label">Explore</p>
            <a href="#flavors">Flavors <ArrowIcon /></a>
            <a href="#story">Our story <ArrowIcon /></a>
            <a href="#faq">Questions <ArrowIcon /></a>
          </div>
          <div className="footer-contact">
            <p className="footer-label">Contact</p>
            <p>{brand.contact}</p>
          </div>
        </div>
        <div className="content-width footer-bottom">
          <p>{brand.fictionalNotice}</p>
          <span>© Fjora / 01</span>
        </div>
      </footer>
    </div>
  );
}

createRoot(document.getElementById("root")!).render(<App />);