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 = [
  { title: 'A little citrus. A clear horizon.', text: 'Bright lime peel meets the woodland character of juniper. Arctic thyme brings a delicate herbal finish.', profile: 'Citrus · Woodland · Herbal' },
  { title: 'The softer side of the North.', text: 'Tart cloudberry opens into gentle chamomile. Rosehip adds a bright, rounded finish.', profile: 'Berry · Floral · Bright' },
  { title: 'A quiet walk through the trees.', text: 'Fresh spruce tip leads with a forest note. Earthy angelica and black currant leaf bring a green, lingering finish.', profile: 'Forest · Earthy · Green' },
];
const faqs = [
  ['Is Fjora sweetened?', 'No. Every flavor is unsweetened, with no sugar and no sweeteners. Just room for the botanicals to speak.'],
  ['Does it contain caffeine?', 'All three flavors are caffeine-free. Choose whichever botanical notes call to you.'],
  ['Can I recycle the bottle?', 'Our bottles are single-material glass with an aluminium cap. Both materials are widely recyclable. Check your local guidance for how to sort them.'],
  ['Is Taste the North available all year?', 'Taste the North is our seasonal winter line, bottled once per season. It is sold seasonally while stock lasts.'],
];
function Arrow({ down = false }: { down?: boolean }) {
  return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true" style={down ? { transform: 'rotate(90deg)' } : undefined}><path d="M4 12h15M13 5l7 7-7 7" stroke="currentColor" strokeWidth="1.3" /></svg>;
}
function Mark() {
  return <svg className="mark" viewBox="0 0 48 45" fill="none" aria-hidden="true"><path d="M3 25 17 9l8 10 7-8 13 14M4 31c7-8 13 8 21 0s13 8 20 0M4 38c7-8 13 8 21 0s13 8 20 0" stroke="currentColor" strokeWidth="1.3"/><circle cx="33" cy="5" r="2" fill="currentColor"/></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 className="wordmark" href="#top" aria-label="Fjora home">fjora<span className="wordmark-dot" aria-hidden="true">✳</span></a>
      <span className="header-caption">BOTANICAL SPARKLING WATER</span>
      <nav aria-label="Main navigation"><a href="#flavors">The flavors</a><a href="#story">Our story</a><a href="#faq">Good to know</a></nav>
    </header>
    <main id="main">
      <section className="hero" id="top" aria-labelledby="hero-title">
        <img className="hero-image" src="/assets/hero-fjord.webp" alt="Winter light falling across a still Nordic fjord and snow-covered mountains" fetchPriority="high" />
        <div className="hero-shade" />
        <div className="hero-content">
          <div className="eyebrow"><span className="small-line" /> THE WINTER COLLECTION</div>
          <h1 id="hero-title">Taste the <br /><em>North.</em></h1>
          <p>Glacial water. Cold-steeped botanicals.<br />A quieter kind of sparkling.</p>
          <a href="#flavors" className="primary-link">Find your flavor <Arrow /></a>
        </div>
        <div className="hero-footer"><span>THREE FLAVORS. ONE NORTHERN SPIRIT.</span><a href="#flavors" aria-label="Scroll to the flavors"><span>TAKE A MOMENT. EXPLORE.</span><Arrow down /></a></div>
        <div className="hero-side">INSPIRED BY THE NORTH</div>
      </section>
      <div className="qualities" aria-label="Collection qualities"><span>Botanically curious</span><span className="asterisk">✳</span><span>Naturally unsweetened</span><span className="asterisk">✳</span><span>Quietly sparkling</span><span className="asterisk">✳</span><span>Seasonally bottled</span></div>
      <section className="flavors section-wrap" id="flavors" aria-labelledby="flavors-title">
        <div className="section-intro"><div><p className="eyebrow">01 / THE SEASONAL COLLECTION</p><h2 id="flavors-title">Three expressions<br />of the <em>North.</em></h2></div><p>From citrus peel to forest tips.<br />Find the botanicals that speak to you.</p></div>
        <div className="flavor-options" aria-label="Select a flavor">
          {productData.products.map((p, i) => <button key={p.id} className={`flavor-option ${selected === i ? 'is-selected' : ''}`} onClick={() => setSelected(i)} aria-pressed={selected === i} aria-controls="flavor-detail"><span className="option-image"><img src={p.image} alt={`${p.name} botanical sparkling water bottle`} loading="lazy" /><span className="option-number">0{i + 1}</span><span className="selection-indicator">{selected === i ? '✓' : '+'}</span></span><span className="option-caption"><span>{p.name}</span><span className="option-status">{selected === i ? 'SELECTED' : 'EXPLORE'} <Arrow /></span></span></button>)}
        </div>
        <div className={`flavor-detail flavor-${product.id}`} id="flavor-detail" aria-live="polite" aria-atomic="true">
          <div className="detail-image"><img key={product.image} src={product.image} alt={`${product.name} with its botanicals`} loading="lazy" /><span className="image-label">A TASTE OF THE NORTH / 0{selected + 1}</span></div>
          <div className="detail-copy" key={product.id}><p className="eyebrow">IN THE BOTTLE / 0{selected + 1}</p><h3>{product.name}</h3><p className="tasting-title">{notes[selected].title}</p><p className="tasting-note">{notes[selected].text}</p><div className="botanical-block"><h4>THE BOTANICALS</h4><ul>{product.botanicals.map(b => <li key={b}>{b}</li>)}</ul></div><div className="profile"><span className="profile-dot" />{notes[selected].profile}</div></div>
        </div>
        <p className="collection-note">No sugar. No sweeteners. No caffeine. <span>Just a different view.</span></p>
      </section>
      <section className="story" id="story" aria-labelledby="story-title"><div className="story-image"><img src="/assets/story-botanicals.webp" alt="Cloudberries, lime peel, juniper berries and spruce resting on a frosted rock by the water" loading="lazy" /><span>ROOTED IN A NORTHERN LANDSCAPE.</span></div><div className="story-copy"><p className="eyebrow">02 / OUR NORTHERN ROOTS</p><Mark /><h2 id="story-title">A wild place.<br />A quiet <em>pour.</em></h2><p>Our story begins in the North. With glacial meltwater, cold-steeped botanicals, and a taste for the quieter things.</p><p>Taste the North brings that spirit to three winter flavors. A little citrus. A little berry. A little forest. Bottled once each season, to put a sense of place in your glass.</p><span className="story-signoff">From the North, with nature.</span></div></section>
      <section className="faq section-wrap" id="faq" aria-labelledby="faq-title"><div className="faq-intro"><p className="eyebrow">03 / A LITTLE CLARITY</p><h2 id="faq-title">Good to<br /><em>know.</em></h2><p>A few details.<br />Nothing to hide.</p></div><div className="faq-list">{faqs.map(([question, answer], i) => <details key={question}><summary><span className="faq-number">0{i+1}</span><span>{question}</span><span className="faq-icon" aria-hidden="true" /></summary><p>{answer}</p></details>)}</div></section>
    </main>
    <footer><div className="footer-main"><div><a href="#top" className="wordmark footer-wordmark" aria-label="Fjora, back to top">fjora<span className="wordmark-dot" aria-hidden="true">✳</span></a><p>A little closer to the North.</p></div><div className="footer-contact"><span className="eyebrow">A LINE FROM YOU.</span><p>{brand.footer_contact}</p></div><a className="back-top" href="#top" aria-label="Back to top"><Arrow down /></a></div><div className="footer-bottom"><p>{brand.fictional_notice}</p><span>BOTANICALS. WATER. A NORTHERN SPIRIT.</span></div></footer>
  </>;
}
createRoot(document.getElementById('root')!).render(<App />);