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. Green. Clear.', note: 'A bright edge of lime peel meets the woodland depth of juniper. Arctic thyme leaves a quiet herbal finish.', color: 'lime' },
  { character: 'Soft. Floral. Golden.', note: 'Cloudberry brings a gently tart opening. Chamomile softens the edges, with a delicate note of rosehip to finish.', color: 'berry' },
  { character: 'Fresh. Wooded. Wild.', note: 'Fresh spruce tip leads into the earthy character of angelica. Black currant leaf adds a green, lingering finish.', color: 'spruce' },
];
const faqs = [
  ['Is Fjora sweetened?', 'No sugar. No sweeteners. Every Fjora flavor is unsweetened, leaving room for the botanicals.'],
  ['Does it contain caffeine?', 'No. All three flavors are caffeine-free.'],
  ['Can I recycle the bottle?', 'Yes. Our bottles are single-material glass, finished with an aluminium cap. Both materials are widely recyclable.'],
  ['Is the winter collection always available?', 'Taste the North is sold seasonally, while stock lasts. Three flavors, bottled once per season.'],
];
function Star({ className = '' }: { className?: string }) {
  return <svg className={className} viewBox="0 0 48 48" fill="none" aria-hidden="true"><path d="M24 2v44M2 24h44M8.5 8.5l31 31m0-31-31 31" stroke="currentColor" strokeWidth="1"/><path d="m24 8 3.5 12.5L40 24l-12.5 3.5L24 40l-3.5-12.5L8 24l12.5-3.5L24 8Z" fill="currentColor"/></svg>;
}
function Arrow({ down = false }: { down?: boolean }) {
  return <svg className={down ? 'arrow down' : 'arrow'} viewBox="0 0 24 24" fill="none" aria-hidden="true"><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="#home" className="wordmark" aria-label="Fjora home">fjora<span className="wordmark-dot">.</span></a>
      <span className="header-description">NORDIC BOTANICAL SPARKLING WATER</span>
      <nav aria-label="Main navigation"><a href="#flavors">The flavors</a><a href="#story">Our story</a><a href="#faq">FAQ</a></nav>
    </header>
    <main id="main">
      <section className="hero" id="home" aria-labelledby="campaign-title">
        <img className="hero-image" src="/assets/hero-fjord.webp" alt="Winter light falling across snow-covered mountains and still fjord water" fetchPriority="high" />
        <div className="hero-shade" />
        <div className="hero-top"><span className="eyebrow">THE WINTER COLLECTION</span><span className="hero-season"><span /> A SEASON OF STILLNESS</span></div>
        <div className="hero-content"><h1 id="campaign-title">Taste the<br/><em>North</em><span className="title-period">.</span></h1><p>Glacial water. Cold-steeped botanicals.<br/>A little of the North, bottled.</p><a className="primary-button" href="#flavors">Discover the flavors <Arrow down /></a></div>
        <div className="hero-bottom"><span>THREE FLAVORS. ONE FLEETING SEASON.</span><div className="north-mark"><span>N</span><Star /></div><span className="hero-bottom-right">BORN OF THE NORTH<br/>MADE FOR THE MOMENT</span></div>
      </section>
      <div className="qualities"><span>Botanical by nature.</span><div><span>UNSWEETENED</span><Star/><span>CAFFEINE-FREE</span><Star/><span>COLD-STEEPED</span></div><span className="quality-end">Quietly sparkling.</span></div>
      <section id="flavors" className="flavors section-shell" aria-labelledby="flavors-title">
        <div className="section-heading"><div><p className="eyebrow section-label">01 / THE SEASONAL COLLECTION</p><h2 id="flavors-title">A different kind<br/>of <em>winter spirit.</em></h2></div><p className="section-intro">Three expressions of the northern landscape.<br className="desktop-break"/> Find the one that speaks to you.</p></div>
        <div className="flavor-options" aria-label="Choose a seasonal flavor">{productData.products.map((item, index) => <button key={item.id} type="button" className={`flavor-option ${selected === index ? 'selected' : ''}`} aria-pressed={selected === index} aria-controls="flavor-detail" onClick={() => setSelected(index)}><img src={item.image} alt={`${item.name} bottle`} loading="lazy"/><span className="option-copy"><span className="option-number">0{index + 1}</span><span className="option-name">{item.name}</span><span className="option-character">{notes[index].character}</span></span><span className="selection-indicator" aria-hidden="true">{selected === index ? '✓' : '↗'}</span></button>)}</div>
        <div id="flavor-detail" className={`flavor-detail ${notes[selected].color}`} aria-live="polite" aria-atomic="true">
          <div className="detail-photo"><img key={product.id} src={product.image} alt={`Fjora ${product.name} sparkling water with botanicals`}/><span className="photo-label">THE WINTER COLLECTION — 0{selected + 1}</span></div>
          <div className="detail-copy" key={`${product.id}-copy`}><div className="detail-top"><span className="eyebrow">A TASTE OF THE NORTH</span><Star/></div><p className="detail-character">{notes[selected].character}</p><h3>{product.name}</h3><p className="tasting-note">{notes[selected].note}</p><div className="botanical-block"><h4 className="eyebrow">THE BOTANICALS</h4><ul>{product.botanicals.map(b => <li key={b}>{b}</li>)}</ul></div><p className="detail-footnote">Unsweetened. Caffeine-free. Naturally northern.</p></div>
        </div>
      </section>
      <section id="story" className="story" aria-labelledby="story-title"><div className="story-copy"><p className="eyebrow section-label">02 / OUR ROOTS</p><h2 id="story-title">It starts<br/>with <em>the North.</em></h2><Star className="story-star"/><p>A landscape of ice, water, and quiet resilience. This is where the Fjora story begins.</p><p>Glacial meltwater meets cold-steeped botanicals. A crisp expression of our Nordic roots, with space for each botanical to speak.</p><p>Taste the North captures a passing season. Three winter flavors. Bottled once. A moment to slow down and take it in.</p><span className="story-signoff">From the landscape. To the glass.</span></div><div className="story-photo"><img src="/assets/story-botanicals.webp" alt="Frosted spruce, cloudberries, juniper berries and lime peel on northern rock" loading="lazy"/><span>WILD CHARACTER. QUIET NATURE.</span></div></section>
      <section id="faq" className="faq section-shell" aria-labelledby="faq-title"><div><p className="eyebrow section-label">03 / A FEW THINGS TO KNOW</p><h2 id="faq-title">Clear water.<br/><em>Clear answers.</em></h2><p className="faq-intro">A little more about what’s in your bottle.</p></div><div className="faq-items">{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-top"><a href="#home" className="wordmark footer-wordmark" aria-label="Fjora home">fjora<span className="wordmark-dot">.</span></a><div className="footer-message"><Star/><p>A little further north.<br/>A little closer to nature.</p></div><a className="back-top" href="#home">Back to the top <Arrow/></a></div><div className="footer-bottom"><p>{brand.footer_contact}</p><p>{brand.fictional_notice}</p></div></footer>
  </>;
}
createRoot(document.getElementById('root')!).render(<App/>);