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 notes: Record<string, string> = {
  "glacier-lime": "Bright lime peel meets the resinous clarity of juniper, then settles into a cool herbaceous finish.",
  cloudberry: "Soft cloudberry and floral chamomile meet a gentle rosehip note. Round, quiet, and clear.",
  "spruce-tip": "Fresh spruce tip leads, with earthy angelica and dark leafiness from black currant leaf.",
};
const faqs = [
  ["Is Taste the North sweetened?", "No. Every flavor is unsweetened, with no sugar and no sweeteners."],
  ["Does it contain caffeine?", "No. All three seasonal flavors are caffeine-free."],
  ["What is the bottle made from?", "Each bottle is single-material glass with an aluminium cap. Both are widely recyclable."],
  ["When is the seasonal line available?", "Taste the North is bottled once per season and sold seasonally while stock lasts."],
];
function Mark() { return <span className="mark" aria-hidden="true"><i /><i /><i /></span>; }
function App() {
  const [selectedId, setSelectedId] = useState(products[0].id);
  const [openFaq, setOpenFaq] = useState<number | null>(null);
  const selected = products.find((product) => product.id === selectedId) ?? products[0];
  return <main>
    <section className="hero" id="top" aria-labelledby="campaign-title">
      <nav className="nav" aria-label="Primary navigation"><a className="wordmark" href="#top" aria-label="Fjora home"><Mark />fjora</a><div className="nav-links"><a href="#flavors">Flavors</a><a href="#story">Our water</a><a href="#faq">Questions</a></div><a className="nav-season" href="#flavors">Winter / 01</a></nav>
      <div className="hero-image"><img src="/assets/hero-fjord.webp" alt="A quiet fjord beneath snow-covered mountains" /></div>
      <div className="hero-content"><p className="eyebrow">A seasonal water collection</p><h1 id="campaign-title">Taste<br />the North</h1><div className="hero-bottom"><p>Cold-steeped botanicals.<br />A little further north.</p><a className="round-link" href="#flavors"><span>Explore<br />the line</span><b>↓</b></a></div></div><p className="hero-index">01 / 04</p>
    </section>
    <section className="flavors section" id="flavors" aria-labelledby="flavors-title">
      <div className="section-top"><p className="eyebrow">The winter line</p><p className="section-count">03 flavors · bottled once per season</p></div><h2 id="flavors-title">Choose your<br /><em>clear note.</em></h2>
      <div className="flavor-layout"><div className="flavor-options" role="group" aria-label="Seasonal flavors">{products.map((product, index) => <button key={product.id} className={`flavor-option ${product.id === selectedId ? "is-selected" : ""}`} onClick={() => setSelectedId(product.id)} aria-pressed={product.id === selectedId}><span className="option-number">0{index + 1}</span><span>{product.name}</span><span className="option-arrow">↗</span><img src={product.image} alt="" /></button>)}</div>
        <article className="flavor-detail" aria-live="polite"><div className="detail-image"><img src={selected.image} alt={`${selected.name} sparkling water bottle`} /></div><div className="detail-copy"><p className="eyebrow">Selected flavor</p><h3>{selected.name}</h3><p className="tasting-note">{notes[selected.id]}</p><div className="botanicals"><span>Botanicals</span><ul>{selected.botanicals.map((item) => <li key={item}>{item}</li>)}</ul></div></div></article>
      </div>
    </section>
    <section className="story" id="story" aria-labelledby="story-title"><div className="story-image"><img src="/assets/story-botanicals.webp" alt="Botanicals in close detail" /></div><div className="story-copy"><p className="eyebrow">Made with a northern point of view</p><h2 id="story-title">A clear source.<br /><em>A slower steep.</em></h2><p>Fjora begins with a Nordic origin story: glacial meltwater and botanicals cold-steeped for a measured, clean taste.</p><p>Taste the North is our winter line. Three flavors, made for the stillness of the season and bottled once within it.</p><div className="story-signoff"><Mark /><span>Fjora<br />Northern water</span></div></div></section>
    <section className="faq section" id="faq" aria-labelledby="faq-title"><div><p className="eyebrow">A few clear answers</p><h2 id="faq-title">Good to<br /><em>know.</em></h2></div><div className="faq-list">{faqs.map(([question, answer], index) => <div className={`faq-item ${openFaq === index ? "open" : ""}`} key={question}><button aria-expanded={openFaq === index} aria-controls={`faq-answer-${index}`} onClick={() => setOpenFaq(openFaq === index ? null : index)}><span>{question}</span><b>{openFaq === index ? "−" : "+"}</b></button><div id={`faq-answer-${index}`} className="faq-answer" hidden={openFaq !== index}><p>{answer}</p></div></div>)}</div></section>
    <footer><div className="footer-brand"><a className="wordmark" href="#top"><Mark />fjora</a><p>Seasonal sparkling water<br />from the Nordic edge.</p></div><div className="footer-contact"><p>Say hello</p><a href="mailto:hello@fjora.example">hello@fjora.example</a><span>Fjordgata 7, 9000 Tromsø</span></div><p className="notice">Fjora is a fictional brand created for UIBenchmark.</p><a className="back-top" href="#top">Back to top ↑</a></footer>
  </main>;
}
createRoot(document.getElementById("root")!).render(<App />);