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 gives way to dry juniper and a quiet, herbaceous finish.",
  cloudberry: "Soft cloudberry meets gentle chamomile, with a tart rosehip edge.",
  "spruce-tip": "Fresh spruce leads into earthy angelica and a leafy black currant finish.",
};
const faqs = [
  ["Is Fjora sweetened?", "No. Every flavor is unsweetened, with no sugar and no sweeteners."],
  ["Does Fjora contain caffeine?", "No. All three seasonal flavors are caffeine-free."],
  ["Can I recycle the bottle?", "The bottle is single-material glass with an aluminium cap. Both are widely recyclable."],
  ["Is Taste the North available year-round?", "No. This winter line is bottled once per season and sold while stock lasts."],
];
function Mark({ compact = false }: { compact?: boolean }) { return <a className={`mark ${compact ? "mark--compact" : ""}`} href="#top" aria-label="Fjora, back to top"><svg viewBox="0 0 36 36" aria-hidden="true"><path d="M4 27 13 9l5 9 5-13 9 22H4Z"/><path d="M9 27c5-5 12-5 18 0"/></svg><span>FJORA</span></a>; }
function Arrow() { return <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h13M14 7l5 5-5 5"/></svg>; }
function App() {
  const [selectedId, setSelectedId] = useState(products[0].id);
  const selected = products.find((p) => p.id === selectedId)!;
  return <>
    <header className="site-header"><Mark compact/><nav aria-label="Main navigation"><a href="#flavors">Flavors</a><a href="#story">Our source</a><a href="#faq">FAQ</a></nav><span className="edition">WINTER · 01</span></header>
    <main>
      <section className="hero" id="top"><img className="hero__image" src="/assets/hero-fjord.webp" alt="A quiet fjord between snow-covered mountains"/><div className="hero__shade"/><div className="hero__content"><p className="eyebrow light">A seasonal collection from the edge of the north</p><h1>Taste<br/>the North</h1><p className="hero__intro">Glacial water. Cold-steeped botanicals.<br/>Three expressions of a northern winter.</p><a className="primary-link" href="#flavors"><span>Explore the flavors</span><Arrow/></a></div><div className="hero__foot"><span>69° 38′ N</span><span>Scroll to discover</span></div></section>
      <section className="flavors section" id="flavors"><div className="section-heading"><div><p className="eyebrow">The winter line · 01—03</p><h2>Three ways<br/>north.</h2></div><p className="section-lede">A short seasonal run, bottled once. Choose a flavor and meet its botanicals.</p></div>
        <div className="flavor-picker" role="group" aria-label="Choose a flavor">{products.map((p,i)=><button key={p.id} className="flavor-card" aria-pressed={selectedId===p.id} onClick={()=>setSelectedId(p.id)}><span className="flavor-card__number">0{i+1}</span><img src={p.image} alt={`${p.name} bottle`}/><span className="flavor-card__name">{p.name}</span><span className="flavor-card__select">{selectedId===p.id?"Selected":"View flavor"}</span></button>)}</div>
        <article className="flavor-detail" aria-live="polite"><div className="detail-image"><img key={selected.image} src={selected.image} alt={`${selected.name} bottle and ingredients`}/></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"><p>Cold-steeped botanicals</p><ul>{selected.botanicals.map(b=><li key={b}>{b}</li>)}</ul></div><p className="dry-note">Unsweetened · Caffeine-free</p></div></article>
      </section>
      <section className="story" id="story"><div className="story__image-wrap"><img src="/assets/story-botanicals.webp" alt="Nordic botanicals in close detail"/><span>BOTANICAL STUDY · WINTER 01</span></div><div className="story__copy"><p className="eyebrow">From water to wild</p><h2>Drawn from<br/>the landscape.</h2><p className="story__lead">Fjora begins with glacial meltwater and a slower way of drawing out flavor.</p><p>Botanicals are cold-steeped for a clear, composed taste. Each winter, we bottle three seasonal expressions. Nothing loud. Just water, plants and the character of the north.</p><div className="story__line"><span>Glacial meltwater</span><i/><span>Cold-steeped botanicals</span></div></div></section>
      <section className="faq section" id="faq"><div className="faq__intro"><p className="eyebrow">Good to know</p><h2>Clear answers.</h2><p>The essentials, kept simple.</p></div><div className="faq__list">{faqs.map(([q,a],i)=><details key={q}><summary><span className="faq-number">0{i+1}</span><span>{q}</span><span className="plus" aria-hidden="true"/></summary><p>{a}</p></details>)}</div></section>
    </main>
    <footer><div className="footer__top"><Mark/><p>Botanical sparkling water<br/>from a northern state of mind.</p><a href="#top">Back to top ↑</a></div><div className="footer__bottom"><address>hello@fjora.example — Fjordgata 7, 9000 Tromsø</address><p>Fjora is a fictional brand created for UIBenchmark.</p><span>© 2026 FJORA</span></div></footer>
  </>;
}
createRoot(document.getElementById("root")!).render(<App/>);