import { useState } from "react";
import { createRoot } from "react-dom/client";
import productData from "../public/data/products.json";
import brand from "../public/data/brand.json";
import "./styles.css";

const notes = [
  { character: "Bright. Herbal. Clear.", text: "A bright edge of lime peel meets the woodland character of juniper. Arctic thyme brings a quiet herbal finish.", color: "#647750" },
  { character: "Soft. Floral. Rounded.", text: "Cloudberry brings a rounded berry note, softened by chamomile. Rosehip adds a gently tart finish.", color: "#ad7744" },
  { character: "Green. Woodsy. Crisp.", text: "The green character of spruce tip meets earthy angelica. Black currant leaf leaves a crisp, leafy finish.", color: "#3b6858" },
];
const faqs = [
  ["Is Fjora sweetened?", "No. Every flavor is unsweetened, with no sugar and no sweeteners. Just a different way to taste the North."],
  ["Does it contain caffeine?", "All three seasonal flavors are caffeine-free."],
  ["Can I recycle the bottle?", "Our bottles are single-material glass with an aluminium cap. Both materials are widely recyclable. Check your local recycling guidance for how to separate and sort them."],
  ["Is the winter line available all year?", "Taste the North is bottled once per season and sold seasonally while stock lasts. Three flavors, a moment in the season."],
];
function Mark({ small = false }: { small?: boolean }) {
  return <span className={`wordmark ${small ? "small" : ""}`}>fj<span className="logo-o">o</span>ra<span className="logo-dot">.</span></span>;
}
function Arrow({ down = false }: { down?: boolean }) {
  return <svg width="21" height="21" viewBox="0 0 24 24" fill="none" aria-hidden="true" style={down ? { transform: "rotate(90deg)" } : undefined}><path d="M4 12h15m-6-6 6 6-6 6" stroke="currentColor" strokeWidth="1.4" /></svg>;
}
function App() {
  const [selected, setSelected] = useState(0);
  const product = productData.products[selected];
  return <>
    <a className="skip-link" href="#main">Skip to content</a>
    <header className="header">
      <a href="#" className="brand-link" aria-label="Fjora home"><Mark /></a>
      <nav aria-label="Main navigation"><a href="#flavors">The flavors</a><a href="#story">Our story</a><a href="#faq">A few answers</a></nav>
      <span className="header-note"><span className="status-dot" /> THE WINTER COLLECTION</span>
    </header>
    <main id="main">
      <section className="hero" aria-labelledby="hero-title">
        <img className="hero-image" src="/assets/hero-fjord.webp" alt="Winter light falling across a still fjord between snow-covered mountains" fetchPriority="high" />
        <div className="hero-shade" />
        <div className="hero-content"><p className="eyebrow">NORDIC BOTANICAL SPARKLING WATER</p><h1 id="hero-title">Taste the<br /><em>North</em><span className="title-period">.</span></h1><p className="hero-description">Cold water. Wild character.<br />A season of botanicals, bottled.</p><a className="button" href="#flavors">Discover the flavors <Arrow down /></a></div>
        <div className="hero-bottom"><span>INSPIRED BY THE NORTH. MADE FOR THE MOMENT.</span><span className="hero-season">WINTER EDITION <span>01 — 03</span></span></div>
        <div className="hero-side">A QUIETER KIND OF REFRESHMENT</div>
      </section>
      <div className="qualities" aria-label="Collection facts"><span>Cold-steeped botanicals</span><span className="asterisk">✳</span><span>No sugar. No sweeteners.</span><span className="asterisk">✳</span><span>Always caffeine-free</span></div>
      <section id="flavors" className="flavors section-wrap" aria-labelledby="flavors-title">
        <div className="section-heading"><div><p className="eyebrow">01 / THE WINTER COLLECTION</p><h2 id="flavors-title">Three ways north.</h2></div><p>A little citrus. A little forest. A little wild.<br />Find the flavor that feels like you.</p></div>
        <div className="flavor-options" role="group" aria-label="Choose a seasonal flavor">
          {productData.products.map((item, index) => <button key={item.id} className={`flavor-option ${selected === index ? "active" : ""}`} onClick={() => setSelected(index)} aria-pressed={selected === index} aria-controls="flavor-detail"><img src={item.image} alt={`${item.name} bottle`} /><span className="option-copy"><span className="eyebrow">0{index + 1}</span><span className="option-name">{item.name}</span></span><span className="option-indicator" aria-hidden="true">{selected === index ? "↗" : "+"}</span></button>)}
        </div>
        <div id="flavor-detail" className={`flavor-detail flavor-${product.id}`} aria-live="polite" aria-atomic="true">
          <div className="product-visual"><img key={product.image} src={product.image} alt={`${product.name} botanical sparkling water with its botanicals`} /><span className="image-label">FJORA / WINTER 0{selected + 1}</span></div>
          <div className="product-copy"><p className="eyebrow"><span className="flavor-dot" style={{ background: notes[selected].color }} /> SEASONAL BOTANICAL BLEND</p><h3>{product.name}</h3><p className="character">{notes[selected].character}</p><p className="tasting-note">{notes[selected].text}</p><div className="botanicals"><p className="eyebrow">THE BOTANICALS</p><ul>{product.botanicals.map((botanical, i) => <li key={botanical}><span>0{i + 1}</span>{botanical}</li>)}</ul></div><p className="product-footnote">Unsweetened <span>·</span> Caffeine-free <span>·</span> Sparkling</p></div>
        </div>
      </section>
      <section id="story" className="story" aria-labelledby="story-title"><div className="story-copy"><p className="eyebrow">02 / ROOTED IN THE NORTH</p><h2 id="story-title">Nature sets<br />the pace.<br /><em>We follow.</em></h2><div className="story-text"><p>Our story begins with glacial meltwater and the quiet character of Nordic botanicals. Cold-steeped. Unhurried. A meeting of water, plant, and place.</p><p>Taste the North captures that spirit in three winter flavors. Bottled once per season, each is an invitation to pause. To notice the small things. To taste a little more of the world around you.</p></div><span className="story-signature">From the North, with character.</span></div><div className="story-image"><img src="/assets/story-botanicals.webp" alt="Frost on spruce branches, cloudberries, juniper berries and curls of lime peel" loading="lazy" /><span>THE SMALL THINGS MAKE THE DIFFERENCE.</span></div></section>
      <section id="faq" className="faq section-wrap" aria-labelledby="faq-title"><div><p className="eyebrow">03 / GOOD TO KNOW</p><h2 id="faq-title">A few<br /><em>clear answers.</em></h2><p>Simple by nature.<br />Right down to the details.</p></div><div className="faq-items">{faqs.map(([question, answer], i) => <details key={question}><summary><span className="question-number">0{i + 1}</span><span>{question}</span><span className="faq-plus" aria-hidden="true" /></summary><p>{answer}</p></details>)}</div></section>
    </main>
    <footer><div className="footer-top"><a href="#" aria-label="Fjora home"><Mark /></a><p>A little closer to the North.</p><a className="back-top" href="#">Back to the top <Arrow down /></a></div><div className="footer-bottom"><p>{brand.footer_contact}</p><p>{brand.fictional_notice}</p></div></footer>
  </>;
}
createRoot(document.getElementById("root")!).render(<App />);