// Hawaiian Style — More marketing site sections.

// Renders a single product card.
const ProductCard = ({ p, onAdd }) => (
  <a key={p.id} href="#" className="hws-prodcard" style={{
    background: 'var(--paper-soft)', borderRadius: 22, overflow: 'hidden',
    transition: 'transform .2s, box-shadow .2s', display: 'flex', flexDirection: 'column',
    border: '1.5px solid rgba(61,47,35,0.08)', textDecoration: 'none', color: 'var(--brown)',
  }}
    onMouseOver={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
    onMouseOut={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
    onClick={e => { if (e.target.closest('.add-btn')) e.preventDefault(); }}
  >
    <div style={{
      aspectRatio: '1 / 1.05', position: 'relative', display: 'grid', placeItems: 'center',
      borderBottom: '1.5px solid rgba(61,47,35,0.08)', overflow: 'hidden',
      background: `repeating-linear-gradient(45deg, rgba(61,47,35,0.05) 0 2px, transparent 2px 18px), ${p.gradient}`,
    }}>
      {p.tag && <span style={{
        position: 'absolute', top: 14, left: 14, padding: '6px 11px', borderRadius: 999,
        fontFamily: 'var(--font-body)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase',
        fontWeight: 800, ...p.tagStyle,
      }}>{p.tag}</span>}
      <img src={p.img} alt={p.name} style={{ width: '70%', height: '85%', objectFit: 'contain', filter: 'drop-shadow(0 14px 20px rgba(0,0,0,0.3))' }} />
      {p.script && <span style={{
        position: 'absolute', bottom: 14, right: 14, fontFamily: 'var(--font-script)', fontSize: 26,
        color: p.scriptColor || 'var(--paper)', transform: 'rotate(-8deg)',
        textShadow: p.scriptColor === 'var(--brown)' ? 'none' : '0 2px 4px rgba(0,0,0,0.2)',
      }}>{p.script}</span>}
    </div>
    <div style={{ padding: '20px 22px 24px', display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--brown-soft)' }}>{p.cat}</span>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, lineHeight: 1.05, marginTop: 6, letterSpacing: '0.01em', textTransform: 'uppercase' }}>{p.name}</div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 12 }}>
        <span style={{ fontWeight: 800, fontSize: 17 }}>฿{p.price}</span>
        <button className="add-btn" onClick={e => { e.preventDefault(); onAdd && onAdd(p); }} style={{
          background: 'none', border: 'none', fontFamily: 'var(--font-body)', fontWeight: 800, fontSize: 11,
          letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--orange)', cursor: 'pointer',
        }}>Add to bag +</button>
      </div>
    </div>
  </a>
);

// Grouped product grid — 3 rows by category (Tanning / Aftersun / Sunblock).
// Desktop: each row is its own labeled sub-grid.
// Mobile:  each row becomes a horizontal scroll-snap track.
const ProductGrid = ({ products, onAdd }) => {
  const groups = [
    { id: 'tanning',  label: 'Tanning',  script: 'the soul.',      match: p => /^Tanning/.test(p.cat) },
    { id: 'aftersun', label: 'Aftersun', script: 'the cool down.', match: p => /^After Sun/.test(p.cat) },
    { id: 'sunblock', label: 'Sunblock', script: 'the enabler.',   match: p => /^Sunblock/.test(p.cat) },
  ].map(g => ({ ...g, items: products.filter(g.match) }));

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 56 }}>
      {groups.map((g, gi) => (
        <div key={g.id} className="hws-prodrow-wrap" id={g.id}>
          {/* Row header */}
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 24 }}>
            <span style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(22px, 2.6vw, 40px)',
              letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--brown)',
              lineHeight: 1,
            }}>{g.label}</span>
            <span style={{
              fontFamily: 'var(--font-script)', fontSize: 'clamp(22px, 2.6vw, 38px)',
              color: 'var(--orange)', transform: 'rotate(-3deg)',
              display: 'inline-block', lineHeight: 1,
            }}>{g.script}</span>
            <span style={{ flex: 1, height: 1.5, background: 'rgba(61,47,35,0.14)' }} />
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em',
              textTransform: 'uppercase', color: 'var(--brown-soft)', opacity: 0.7,
            }}>{g.items.length} {g.items.length === 1 ? 'bottle' : 'bottles'}</span>
          </div>

          {/* Cards row — desktop: fixed 4-col grid (uniform card width like Tanning row).
              Mobile: horizontal scroller via §16. */}
          <div
            className="hws-mobile-scroller hws-prodrow"
            data-prodrow={gi === 0 ? 'first' : 'true'}
            data-scroller-cards={String(g.items.length)}
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(4, 1fr)',
              gap: 22,
            }}
          >
            {g.items.map(p => <ProductCard key={p.id} p={p} onAdd={onAdd} />)}
          </div>
        </div>
      ))}
    </div>
  );
};

// Reusable "Coming Soon" modal — shared by the Beach Club buttons and the
// footer links. Pass a label (string) to open; null/'' keeps it closed.
const ComingSoonModal = ({ label, onClose }) => {
  if (!label) return null;
  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-label={label + ' coming soon'}
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 1000,
        background: 'rgba(61, 47, 35, 0.72)',
        display: 'grid', placeItems: 'center', padding: 24,
        backdropFilter: 'blur(4px)',
        animation: 'hwsFadeIn .18s ease-out',
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          position: 'relative',
          background: 'var(--paper)', color: 'var(--brown)',
          borderRadius: 22, padding: '44px 40px 36px',
          maxWidth: 460, width: '100%', textAlign: 'center',
          border: '2px solid var(--brown)',
          boxShadow: '8px 8px 0 var(--orange)',
          fontFamily: 'var(--font-body)',
        }}
      >
        <button
          type="button"
          aria-label="Close"
          onClick={onClose}
          style={{
            position: 'absolute', top: 12, right: 12,
            width: 36, height: 36, borderRadius: '50%',
            background: 'transparent', border: 'none', cursor: 'pointer',
            color: 'var(--brown)', fontSize: 22, lineHeight: 1,
            display: 'grid', placeItems: 'center',
          }}
        >×</button>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.22em',
          textTransform: 'uppercase', color: 'var(--orange)', marginBottom: 14,
        }}>—— Just around the corner ——</div>
        <div style={{
          fontFamily: 'var(--font-display)', fontSize: 56, lineHeight: 0.92,
          letterSpacing: '0.01em', textTransform: 'uppercase', color: 'var(--brown)',
          margin: '0 0 6px',
        }}>Coming<br/>Soon</div>
        <div style={{
          fontFamily: 'var(--font-script)', fontSize: 30,
          color: 'var(--orange)', transform: 'rotate(-3deg)', margin: '4px 0 18px',
        }}>{label.toLowerCase()}</div>
        <p style={{
          fontSize: 15, lineHeight: 1.55, color: 'var(--brown-mid, var(--brown))',
          opacity: 0.78, maxWidth: 340, margin: '0 auto 24px',
        }}>
          We're bottling this one up. Drop your email and we'll send a postcard the day it lands.
        </p>
        <button
          type="button"
          onClick={onClose}
          style={{
            display: 'inline-block', padding: '13px 28px',
            background: 'var(--brown)', color: 'var(--paper)',
            border: 'none', borderRadius: 999, cursor: 'pointer',
            fontFamily: 'var(--font-display)', fontSize: 14,
            letterSpacing: '0.16em', textTransform: 'uppercase',
            boxShadow: '4px 4px 0 var(--sun)',
          }}
        >Got it</button>
      </div>
      <style>{`@keyframes hwsFadeIn { from { opacity: 0 } to { opacity: 1 } }`}</style>
    </div>
  );
};

const MascotMoment = () => {
  const { useState } = React;
  const [comingSoon, setComingSoon] = useState(null);
  return (
  <section id="beachclub" style={{
    maxWidth: 1320, margin: '0 auto', padding: '96px 36px',
  }}>
    <div style={{
      borderRadius: 32,
      background: 'radial-gradient(80% 100% at 0% 50%, rgba(247, 223, 77, 0.45) 0%, transparent 60%), linear-gradient(110deg, var(--blue) 0%, var(--blue-deep) 100%)',
      color: 'var(--paper)', padding: '80px 60px',
      display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 60, alignItems: 'center',
      position: 'relative', overflow: 'hidden', boxShadow: 'var(--shadow-lg)',
    }}>
      <div style={{ position: 'absolute', top: -120, right: -80, width: 380, height: 380, borderRadius: '50%',
        background: 'radial-gradient(circle at 30% 30%, #FFE49B 0%, #F7DF4D 50%, #D8721D 100%)', opacity: 0.55 }} />
      <div style={{ position: 'relative', zIndex: 1 }}>
        <Eyebrow color="rgba(252, 213, 182, 0.85)">Hawaiian Style Beach Club · est. 1995</Eyebrow>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontSize: 'clamp(48px, 5.6vw, 88px)', lineHeight: 0.94,
          letterSpacing: '0.005em', textTransform: 'uppercase', color: 'var(--paper)', margin: '18px 0 0',
        }}>
          Join Kona<br/>
          and <span style={{
            fontFamily: 'var(--font-script)', textTransform: 'none', color: 'var(--sun)',
            fontSize: '0.78em', display: 'inline-block', transform: 'rotate(-3deg)',
          }}>Coco</span> on<br/>
          the beach.
        </h2>
        <p style={{ fontSize: 17, opacity: 0.88, marginTop: 22, maxWidth: 460, lineHeight: 1.6 }}>
          Early access to new bottles, retro packaging drops, members-only beach meet-ups across Phuket, Krabi, and Koh Tao. Free to join. Free to leave whenever you head home.
        </p>
        <div data-perks="true" style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 28 }}>
          {[
            { num: '15%', txt: 'off your first bottle', sub: 'every time, no codes to remember' },
            { num: 'VIP', txt: 'invites to local meet-ups', sub: 'Phuket · Krabi · Koh Tao · Pattaya' },
            { num: '★', txt: 'early-access drops', sub: 'limited retro reissues every summer' },
          ].map(p => (
            <div key={p.num} style={{
              display: 'flex', alignItems: 'center', gap: 18,
              background: 'rgba(252, 213, 182, 0.1)', border: '1.5px solid rgba(252, 213, 182, 0.25)',
              padding: '14px 20px', borderRadius: 14,
            }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, color: 'var(--sun)', letterSpacing: '0.02em', minWidth: 56 }}>{p.num}</div>
              <div style={{ fontWeight: 700, fontSize: 14, letterSpacing: '0.04em' }}>{p.txt}
                <small style={{ display: 'block', fontWeight: 400, opacity: 0.75, marginTop: 2, letterSpacing: 0, fontSize: 12 }}>{p.sub}</small>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Pill variant="yellow" onClick={(e) => { e.preventDefault(); setComingSoon('Join the Club'); }}>Join the Club</Pill>
          <Pill variant="ghost-paper" onClick={(e) => { e.preventDefault(); setComingSoon('See the perks'); }}>See the perks</Pill>
        </div>
      </div>
      <div style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ position: 'relative', height: 440, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {/* Hero card — Kona hugging Coco */}
          <div style={{
            width: 320,
            borderRadius: 26, padding: '20px 22px 18px',
            background: 'rgba(252, 213, 182, 0.96)',
            border: '2.5px solid var(--brown)',
            boxShadow: '0 8px 0 var(--brown), 0 28px 44px -16px rgba(0,0,0,0.4)',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
            transform: 'rotate(-3deg)', zIndex: 1, position: 'relative',
          }}>
            <img src="assets/mascots/kona-hug.png" alt="Kona hugging Coco"
              style={{ width: '100%', height: 240, objectFit: 'contain' }} />
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 30, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--brown)', lineHeight: 1 }}>Kona &amp; Coco</div>
            </div>
            <div style={{ fontFamily: 'var(--font-script)', fontSize: 22, color: 'var(--orange)', lineHeight: 1 }}>your beach besties.</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--brown-soft)', marginTop: 4 }}>Main + Sidekick · Brand Book §32–33</div>
          </div>
          {/* Floating Coco solo, bottom-right */}
          <div style={{
            position: 'absolute', bottom: -10, right: -6,
            width: 110, transform: 'rotate(8deg)', zIndex: 3,
          }}>
            <img src="assets/mascots/coco-swim.png" alt="" style={{ width: '100%' }} />
          </div>
          {/* aloha tagline */}
          <div style={{
            position: 'absolute', left: -8, top: 0, fontFamily: 'var(--font-script)',
            color: 'var(--sun)', fontSize: 32, transform: 'rotate(-8deg)', lineHeight: 0.95,
            textShadow: '0 2px 0 var(--brown)', zIndex: 4,
          }}>aloha,<br/>friend!</div>
        </div>
      </div>
    </div>
    <ComingSoonModal label={comingSoon} onClose={() => setComingSoon(null)} />
  </section>
  );
};

const Story = () => (
  <section id="our-story" style={{ maxWidth: 1320, margin: '0 auto', padding: '96px 36px' }}>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 56, alignItems: 'center' }}>
      <div style={{
        aspectRatio: '4 / 5', borderRadius: 24,
        backgroundImage: 'url(assets/imagery/walking-longboard.jpg)',
        backgroundSize: 'cover', backgroundPosition: 'center',
        position: 'relative', overflow: 'hidden', boxShadow: 'var(--shadow-lg)',
      }}>
        <span style={{
          position: 'absolute', top: 20, left: 20,
          background: 'rgba(61, 47, 35, 0.8)', color: 'var(--paper)',
          padding: '7px 14px', borderRadius: 999,
          fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
        }}>Patong Beach · '24</span>
        <div style={{ position: 'absolute', bottom: 24, right: 24 }}>
          <VintageStamp year="30+" label="Summers strong" script="since '95" variant="paper" rotate={-12} size={140} />
        </div>
      </div>
      <div>
        <Eyebrow>Our Story</Eyebrow>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontSize: 'clamp(48px, 5.6vw, 88px)', lineHeight: 0.94,
          textTransform: 'uppercase', letterSpacing: '0.005em', color: 'var(--brown)', margin: '18px 0 0',
        }}>
          Bottled in Thailand,<br/>
          made for every<br/>
          beach <span style={{
            fontFamily: 'var(--font-script)', textTransform: 'none', color: 'var(--orange)',
            fontSize: '0.92em', display: 'inline-block', transform: 'rotate(-3deg)',
          }}>memory.</span>
        </h2>
        <p style={{ fontSize: 18, marginTop: 26, color: 'var(--brown-soft)', maxWidth: 540, lineHeight: 1.6 }}>
          Born in Thailand in 1995, Hawaiian Style was created for people who live freely under the sun. From beach days and island escapes to everyday outdoor adventures, our formulas are made to protect, nourish, and enhance your natural glow.
        </p>
        <div data-mobile-stack="true" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 36 }}>
          {[
            { num: '01', name: 'Born for Sunshine', desc: 'Made for beach days, road trips, and every carefree moment under the sun.' },
            { num: '02', name: 'Reef Safe', desc: 'Thoughtfully formulated with respect for the ocean and the places we love.' },
            { num: '03', name: 'Trusted Under the Sun', desc: 'Certified quality standards — GMP, ISO-certified manufacturing, and Thailand Trust Mark recognition.' },
          ].map(v => (
            <div key={v.num} style={{ padding: '24px 22px', borderRadius: 18, background: 'var(--paper-soft)', border: '2px solid rgba(61,47,35,0.1)' }}>
              <div style={{ fontFamily: 'var(--font-display)', color: 'var(--orange)', fontSize: 26, lineHeight: 1 }}>{v.num}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, marginTop: 8, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{v.name}</div>
              <div style={{ fontSize: 13, color: 'var(--brown-soft)', marginTop: 6, lineHeight: 1.5 }}>{v.desc}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 36 }}>
          <Pill variant="brown">Read the story</Pill>
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => {
  const { useState } = React;
  const [openCol, setOpenCol] = useState(null);
  const [comingSoon, setComingSoon] = useState(null); // string | null
  const linkCols = [
    { h: 'Shop', items: [
      { label: 'Tanning',  href: '/#tanning' },
      { label: 'Aftersun', href: '/#aftersun' },
      { label: 'Sunblock', href: '/#sunblock' },
      { label: 'Merch',    soon: true },
    ] },
    { h: 'Discover', items: [
      { label: 'Our Story', href: '/#our-story' },
      { label: 'Sun School', href: '/sun-school' },
      { label: 'Press kit', soon: true },
      { label: 'Wholesale', soon: true },
    ] },
    { h: 'Support', items: [
      { label: 'Where to buy', href: '/#where-to-buy' },
      { label: 'FAQ', href: '/faq' },
      { label: 'Shipping', soon: true },
      { label: 'Returns', soon: true },
      { label: 'Contact', soon: true },
    ] },
  ];
  return (
  <footer style={{ marginTop: 40, background: 'var(--brown)', color: 'var(--paper)', padding: '80px 36px 32px', position: 'relative', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', top: -50, right: -50, width: 240, height: 240, borderRadius: '50%', background: 'var(--orange)', opacity: 0.15 }} />
    <div style={{ maxWidth: 1320, margin: '0 auto', position: 'relative' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 1.3fr', gap: 40,
        paddingBottom: 48, borderBottom: '2px solid rgba(252, 213, 182, 0.15)',
      }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <img src="assets/logos/hws-official-stacked-yellow.png" alt="" style={{ width: 170, height: 'auto' }} />
          </div>
          <span style={{ fontFamily: 'var(--font-script)', color: 'var(--sun)', fontSize: 22, marginTop: 10, display: 'block' }}>analog life, bottled.</span>
          <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
            {[
              { name: 'Instagram', href: 'https://www.instagram.com/hawaiianstyleofficial/',
                icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg> },
              { name: 'TikTok', href: 'https://www.tiktok.com/@hawaiianstyleofficial',
                icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43V8.94a8.16 8.16 0 0 0 4.77 1.52V7.05a4.79 4.79 0 0 1-1.84-.36z"/></svg> },
              { name: 'YouTube', href: '#',
                icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"/><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" fill="currentColor"/></svg> },
              { name: 'Facebook', href: 'https://www.facebook.com/hawaiianstyleshop',
                icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.77l-.44 2.89h-2.33v6.99A10 10 0 0 0 22 12z"/></svg> },
            ].map(s => (
              <a key={s.name} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.name} title={s.name} style={{
                width: 40, height: 40, borderRadius: '50%',
                background: 'rgba(252, 213, 182, 0.1)', display: 'grid', placeItems: 'center',
                color: 'var(--paper)', textDecoration: 'none',
                transition: 'background .2s, color .2s, transform .15s',
              }}
                onMouseOver={e => { e.currentTarget.style.background = 'var(--orange)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
                onMouseOut={e => { e.currentTarget.style.background = 'rgba(252, 213, 182, 0.1)'; e.currentTarget.style.transform = 'translateY(0)'; }}
              >
                {s.icon}
              </a>
            ))}
          </div>
        </div>
        {linkCols.map(col => {
          const isOpen = openCol === col.h;
          return (
          <div key={col.h} className="hws-footer-col" data-open={isOpen ? 'true' : 'false'}>
            <button
              type="button"
              className="hws-footer-col-trigger"
              aria-expanded={isOpen}
              onClick={() => setOpenCol(isOpen ? null : col.h)}
              style={{
                background: 'transparent', border: 'none', padding: 0, cursor: 'pointer',
                color: 'var(--paper)', opacity: 0.7, width: '100%',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                fontFamily: 'var(--font-display)', fontSize: 16, letterSpacing: '0.1em',
                textTransform: 'uppercase', fontWeight: 400,
                margin: '0 0 18px',
              }}>
              <span>{col.h}</span>
              <span className="hws-footer-chevron" aria-hidden="true" style={{
                display: 'none', transition: 'transform .2s',
                transform: isOpen ? 'rotate(180deg)' : 'rotate(0)',
              }}>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="3,5 7,9 11,5"/>
                </svg>
              </span>
            </button>
            <ul className="hws-footer-col-list" style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
              {col.items.map(it => (
                <li key={it.label}>
                  <a
                    href={it.soon ? '#' : it.href}
                    onClick={it.soon ? (e) => { e.preventDefault(); setComingSoon(it.label); } : undefined}
                    style={{ fontSize: 14, opacity: 0.9, fontWeight: 600, color: 'var(--paper)', textDecoration: 'none' }}
                  >{it.label}</a>
                </li>
              ))}
            </ul>
          </div>
          );
        })}
        <div>
          <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 16, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--paper)', opacity: 0.7, margin: '0 0 18px', fontWeight: 400 }}>Postcards from the beach</h4>
          <p style={{ fontSize: 13, color: 'var(--paper)', opacity: 0.7, marginBottom: 14, lineHeight: 1.5 }}>
            New drops, retro reissues, the occasional sunset photo. Twice a month, never more.
          </p>
          <input placeholder="your@email.com" style={{
            width: '100%', padding: '13px 16px', borderRadius: 10,
            background: 'rgba(252, 213, 182, 0.08)', border: '2px solid rgba(252, 213, 182, 0.2)',
            color: 'var(--paper)', fontFamily: 'inherit', fontSize: 14, boxSizing: 'border-box',
          }} />
          <div style={{ marginTop: 12 }}>
            <Pill variant="yellow" size="sm">Subscribe</Pill>
          </div>
        </div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 28, fontSize: 12, opacity: 0.6, flexWrap: 'wrap', gap: 10 }}>
        <span>© 1995–2026 Hawaiian Style Co., Ltd. · Bangkok, Thailand</span>
        <span style={{ fontFamily: 'var(--font-thai)' }}>ทุกขวด ผลิตในประเทศไทย</span>
        <span>Privacy · Terms · Cookies</span>
      </div>
      <div style={{
        fontFamily: 'var(--font-display)', fontSize: 'clamp(80px, 16vw, 240px)',
        color: 'var(--paper)', opacity: 0.06, lineHeight: 0.85, marginTop: 40,
        letterSpacing: '0.01em', userSelect: 'none', textAlign: 'center', textTransform: 'uppercase',
      }}>HAWAIIAN STYLE</div>
    </div>
    {comingSoon && (
      <div
        role="dialog"
        aria-modal="true"
        aria-label={comingSoon + ' coming soon'}
        onClick={() => setComingSoon(null)}
        style={{
          position: 'fixed', inset: 0, zIndex: 1000,
          background: 'rgba(61, 47, 35, 0.72)',
          display: 'grid', placeItems: 'center', padding: 24,
          backdropFilter: 'blur(4px)',
          animation: 'hwsFadeIn .18s ease-out',
        }}
      >
        <div
          onClick={(e) => e.stopPropagation()}
          style={{
            position: 'relative',
            background: 'var(--paper)', color: 'var(--brown)',
            borderRadius: 22, padding: '44px 40px 36px',
            maxWidth: 460, width: '100%', textAlign: 'center',
            border: '2px solid var(--brown)',
            boxShadow: '8px 8px 0 var(--orange)',
            fontFamily: 'var(--font-body)',
          }}
        >
          <button
            type="button"
            aria-label="Close"
            onClick={() => setComingSoon(null)}
            style={{
              position: 'absolute', top: 12, right: 12,
              width: 36, height: 36, borderRadius: '50%',
              background: 'transparent', border: 'none', cursor: 'pointer',
              color: 'var(--brown)', fontSize: 22, lineHeight: 1,
              display: 'grid', placeItems: 'center',
            }}
          >×</button>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.22em',
            textTransform: 'uppercase', color: 'var(--orange)', marginBottom: 14,
          }}>—— Just around the corner ——</div>
          <div style={{
            fontFamily: 'var(--font-display)', fontSize: 56, lineHeight: 0.92,
            letterSpacing: '0.01em', textTransform: 'uppercase', color: 'var(--brown)',
            margin: '0 0 6px',
          }}>Coming<br/>Soon</div>
          <div style={{
            fontFamily: 'var(--font-script)', fontSize: 30,
            color: 'var(--orange)', transform: 'rotate(-3deg)', margin: '4px 0 18px',
          }}>{comingSoon.toLowerCase()}</div>
          <p style={{
            fontSize: 15, lineHeight: 1.55, color: 'var(--brown-mid, var(--brown))',
            opacity: 0.78, maxWidth: 340, margin: '0 auto 24px',
          }}>
            We're bottling this one up. Drop your email and we'll send a postcard the day it lands.
          </p>
          <button
            type="button"
            onClick={() => setComingSoon(null)}
            style={{
              display: 'inline-block', padding: '13px 28px',
              background: 'var(--brown)', color: 'var(--paper)',
              border: 'none', borderRadius: 999, cursor: 'pointer',
              fontFamily: 'var(--font-display)', fontSize: 14,
              letterSpacing: '0.16em', textTransform: 'uppercase',
              boxShadow: '4px 4px 0 var(--sun)',
            }}
          >Got it</button>
        </div>
        <style>{`@keyframes hwsFadeIn { from { opacity: 0 } to { opacity: 1 } }`}</style>
      </div>
    )}
  </footer>
  );
};

// Sun-Day Ritual — visualises the product hierarchy (§9):
// Tanning is the SOUL → Aftersun is the RITUAL → Sunblock is the ENABLER.
// Uses the official Kona pose library to walk through a day on the beach.
const SunDayRitual = () => {
  const moments = [
    { pose: 'kona-letsgo.png',           label: 'Suit up',      script: "let's go.",       time: '8 AM',  color: 'var(--sun)', text: 'Pack the bag. Grab the board. Coco\u2019s already waiting.' },
    { pose: 'kona-lotion-tanning.png',   label: 'Lay it on',    script: 'golden ritual.',  time: '10 AM', color: 'var(--orange)', text: 'Coconut tanning oil for the glow. The brand soul, applied warm.' },
    { pose: 'kona-sunbath.png',          label: 'Stay a while', script: 'stay golden.',    time: '1 PM',  color: 'var(--orange-deep)', text: 'Strip lounger, sunglasses down. Coco curls up.' },
    { pose: 'kona-swim.png',             label: 'Cool off',     script: 'cannonball!',     time: '3 PM',  color: 'var(--blue)', text: 'Into the lagoon. Out again. Repeat for the rest of the afternoon.' },
    { pose: 'kona-laydown-aftersun.png', label: 'Wind down',    script: 'the cool down.',  time: '7 PM',  color: 'var(--aloha)', text: 'After Sun lotion, sundown sky, no one in a hurry.' },
  ];
  return (
    <section id="ritual" style={{ maxWidth: 1320, margin: '0 auto', padding: '96px 36px' }}>
      <SectionHead
        eyebrow="04 / The Sun Day"
        title={
          <h2 style={{
            fontFamily: 'var(--font-display)', fontSize: 'clamp(48px, 6.4vw, 104px)',
            lineHeight: 0.92, textTransform: 'uppercase', letterSpacing: '0.005em',
            color: 'var(--brown)', margin: 0,
          }}>
            One beach day,<br/>
            five <span style={{ fontFamily: 'var(--font-script)', textTransform: 'none', color: 'var(--orange)', fontSize: '0.82em', display: 'inline-block', transform: 'rotate(-3deg)' }}>good</span> bottles.
          </h2>
        }
        right="Tanning is the soul. Aftersun is the ritual. Sunblock is the enabler. Here's how Kona spends a day with the whole shelf."
      />
      <div className="hws-mobile-scroller" data-scroller-cards="5" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16, alignItems: 'stretch' }}>
        {moments.map((m, i) => (
          <div key={i} style={{
            background: 'var(--paper-soft)', border: '1.5px solid rgba(61,47,35,0.10)',
            borderRadius: 22, padding: '18px 16px 20px',
            display: 'flex', flexDirection: 'column', gap: 8, position: 'relative',
            transform: `rotate(${[-1.5, 0.5, -0.5, 1, -0.8][i]}deg)`,
            boxShadow: '0 8px 0 rgba(61,47,35,0.08)',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: 'var(--brown-soft)', textTransform: 'uppercase' }}>0{i+1}</span>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 18, color: m.color, lineHeight: 1, letterSpacing: '0.02em' }}>{m.time}</span>
            </div>
            <div style={{ aspectRatio: '1 / 1', display: 'grid', placeItems: 'center',
              background: `radial-gradient(80% 80% at 50% 60%, ${m.color}25 0%, transparent 70%)`,
              borderRadius: 14,
            }}>
              <img src={`assets/mascots/${m.pose}`} alt={m.label}
                style={{ width: '94%', maxHeight: '100%', objectFit: 'contain', filter: 'drop-shadow(0 8px 10px rgba(0,0,0,0.18))' }} />
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, lineHeight: 1, letterSpacing: '0.02em', textTransform: 'uppercase', color: 'var(--brown)' }}>{m.label}</div>
            <div style={{ fontFamily: 'var(--font-script)', fontSize: 22, color: m.color, lineHeight: 1, transform: 'rotate(-2deg)', alignSelf: 'flex-start' }}>{m.script}</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--brown-soft)', lineHeight: 1.5 }}>{m.text}</div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 18, flexWrap: 'wrap' }}>
        <span style={{ fontFamily: 'var(--font-script)', color: 'var(--orange)', fontSize: 26, transform: 'rotate(-3deg)', display: 'inline-block' }}>more where this came from →</span>
        <Pill variant="sun" href="/sun-school">Visit Sun School</Pill>
      </div>
    </section>
  );
};

// Where to Buy — retail directory + online channels.
const WhereToBuy = () => {
  const stores = [
    '7-Eleven', 'Tops', 'Gourmet Market', 'Foodland',
    'Paragon', 'Emporium', 'EmQuartier', 'Emsphere',
    'MBK Center', 'Central', 'Terminal 21', 'Local Drug Stores',
  ];
  const online = [
    { name: 'Shopee Thailand',    code: 'TH', country: 'Thailand',    href: 'https://shopee.co.th/hawaiianstyleofficial',    platform: 'Shopee' },
    { name: 'Shopee Singapore',   code: 'SG', country: 'Singapore',   href: 'https://shopee.sg/hawaiianstyle.sg',           platform: 'Shopee' },
    { name: 'Shopee Malaysia',    code: 'MY', country: 'Malaysia',    href: 'https://shopee.com.my/hawaiianstyle.my',       platform: 'Shopee' },
    { name: 'Shopee Philippines', code: 'PH', country: 'Philippines', href: 'https://shopee.ph/hawaiianstyle.ph',           platform: 'Shopee' },
    { name: 'Lazada Thailand',    code: 'TH', country: 'Thailand',    href: 'https://www.lazada.co.th/shop/hawaiian-style', platform: 'Lazada' },
    { name: 'TikTok Shop',        code: 'WW', country: 'Global',      href: 'https://www.tiktok.com/@hawaiianstyleofficial', platform: 'TikTok' },
  ];

  return (
    <section id="where-to-buy" style={{ maxWidth: 1320, margin: '0 auto', padding: '96px 36px' }}>
      <SectionHead
        eyebrow="05 / Where to Buy"
        title={
          <h2 style={{
            fontFamily: 'var(--font-display)', fontSize: 'clamp(48px, 6.4vw, 104px)',
            lineHeight: 0.92, textTransform: 'uppercase', letterSpacing: '0.005em',
            color: 'var(--brown)', margin: 0,
          }}>
            Pick a bottle<br/>
            <span style={{ fontFamily: 'var(--font-script)', textTransform: 'none', color: 'var(--orange)', fontSize: '0.82em', display: 'inline-block', transform: 'rotate(-3deg)' }}>anywhere</span> you<br/>
            already shop.
          </h2>
        }
        right="14,000+ stores across Thailand and six online stores across SEA. Whichever you walk into, the smell of summer's the same."
      />

      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 28 }}>

        {/* Retail stores */}
        <div style={{
          background: 'var(--paper-soft)',
          border: '2px solid rgba(61,47,35,0.10)',
          borderRadius: 28, padding: '32px 32px 28px',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', top: -40, right: -40, width: 200, height: 200, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(247, 223, 77, 0.4) 0%, transparent 70%)' }} />
          <div style={{ position: 'relative' }}>
            <Eyebrow rule={false}>In Store · Thailand</Eyebrow>
            <h3 style={{
              fontFamily: 'var(--font-display)', fontSize: 36, lineHeight: 0.95,
              letterSpacing: '0.02em', textTransform: 'uppercase', color: 'var(--brown)',
              margin: '12px 0 6px',
            }}>
              On every<br/>good shelf.
            </h3>
            <p style={{ fontSize: 14, color: 'var(--brown-soft)', lineHeight: 1.55, maxWidth: 400, marginBottom: 22 }}>
              From the convenience store on the corner to the mall food hall — wherever you grab a cold drink, a bottle's nearby.
            </p>
            <div data-instore-grid="true" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              {stores.map((s, i) => (
                <div key={s} style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: '12px 14px',
                  background: 'var(--paper)',
                  border: '1.5px solid rgba(61,47,35,0.10)',
                  borderRadius: 10,
                }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: 'var(--orange)', minWidth: 22 }}>{String(i+1).padStart(2,'0')}</span>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 16, letterSpacing: '0.02em', textTransform: 'uppercase', color: 'var(--brown)', lineHeight: 1 }}>{s}</span>
                </div>
              ))}
            </div>
            <p style={{ marginTop: 18, fontFamily: 'var(--font-thai)', fontSize: 12, color: 'var(--brown-soft)', opacity: 0.75 }}>
              วางจำหน่ายในร้านค้าและซูเปอร์มาร์เก็ตชั้นนำทั่วประเทศ
            </p>
          </div>
        </div>

        {/* Online channels */}
        <div style={{
          background: 'var(--brown)',
          borderRadius: 28, padding: '32px 32px 28px',
          color: 'var(--paper)',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', bottom: -60, left: -60, width: 260, height: 260, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(216, 114, 29, 0.45) 0%, transparent 70%)' }} />
          <div style={{ position: 'relative' }}>
            <Eyebrow color="rgba(252, 213, 182, 0.85)" rule={false}>Online · Worldwide</Eyebrow>
            <h3 style={{
              fontFamily: 'var(--font-display)', fontSize: 36, lineHeight: 0.95,
              letterSpacing: '0.02em', textTransform: 'uppercase', color: 'var(--paper)',
              margin: '12px 0 6px',
            }}>
              Tap, tap,<br/>aloha.
            </h3>
            <p style={{ fontSize: 14, color: 'rgba(252, 213, 182, 0.85)', lineHeight: 1.55, maxWidth: 380, marginBottom: 20 }}>
              Six official online stores across Southeast Asia. Same bottles, free shipping over thresholds, mascot stickers in every parcel.
            </p>
            <div data-online-list="true" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {online.map((o) => (
                <a key={o.name} href={o.href} target="_blank" rel="noopener noreferrer" style={{
                  display: 'grid', gridTemplateColumns: '36px 1fr auto', alignItems: 'center', gap: 14,
                  padding: '12px 16px',
                  background: 'rgba(252, 213, 182, 0.08)',
                  border: '1.5px solid rgba(252, 213, 182, 0.18)',
                  borderRadius: 12,
                  color: 'var(--paper)', textDecoration: 'none',
                  transition: 'background .2s, border-color .2s, transform .15s',
                }}
                  onMouseOver={e => { e.currentTarget.style.background = 'rgba(247, 223, 77, 0.15)'; e.currentTarget.style.borderColor = 'var(--sun)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
                  onMouseOut={e => { e.currentTarget.style.background = 'rgba(252, 213, 182, 0.08)'; e.currentTarget.style.borderColor = 'rgba(252, 213, 182, 0.18)'; e.currentTarget.style.transform = 'translateY(0)'; }}
                >
                  <span style={{
                    width: 36, height: 36, borderRadius: '50%',
                    background: 'var(--sun)', color: 'var(--brown)',
                    fontFamily: 'var(--font-display)', fontSize: 13, letterSpacing: '0.04em',
                    display: 'grid', placeItems: 'center', lineHeight: 1,
                    boxShadow: '0 2px 0 rgba(61,47,35,0.5)',
                  }}>{o.code}</span>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 2, minWidth: 0 }}>
                    <span style={{ fontFamily: 'var(--font-display)', fontSize: 16, letterSpacing: '0.02em', textTransform: 'uppercase', lineHeight: 1 }}>{o.platform} · {o.country}</span>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.04em', color: 'rgba(252, 213, 182, 0.55)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{o.href.replace(/^https?:\/\//,'')}</span>
                  </div>
                  <span style={{
                    width: 32, height: 32, borderRadius: '50%',
                    border: '1.5px solid var(--paper)',
                    display: 'grid', placeItems: 'center',
                    fontFamily: 'var(--font-display)', fontSize: 16, color: 'var(--paper)',
                  }}>→</span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// Reviews — postcard-style testimonials.
// Sits on warm paper between Best Sellers and Story.
const Reviews = () => {
  const reviews = [
    {
      stars: 5,
      quote: "The smell alone is worth it. One bottle and I'm back on Patong in '02, board shorts and a sunburn.",
      name: 'Mali T.',
      city: 'Bangkok',
      product: 'Coconut Tanning Oil',
      stamp: '07.24',
      rotate: -2,
    },
    {
      stars: 5,
      quote: "Tried every fancy aftersun on the market. Always come back to this red cap. It just works.",
      name: 'Anchalee P.',
      city: 'Phuket',
      product: 'After Sun Lotion',
      stamp: '11.24',
      rotate: 1,
    },
    {
      stars: 5,
      quote: "SPF 50, doesn't pill under makeup, doesn't make my snorkel mask fog. My summer holiday in one bottle.",
      name: 'Siriporn K.',
      city: 'Koh Tao',
      product: 'Sunblock SPF 50',
      stamp: '01.25',
      rotate: -1.5,
    },
    {
      stars: 5,
      quote: "Bought it because of the bottle. Stayed because the tan is unreal. The glitter version is my new obsession.",
      name: 'June L.',
      city: 'Pattaya',
      product: 'Tanning Lotion · Glitter',
      stamp: '03.25',
      rotate: 1.5,
    },
  ];

  const Stars = ({ n }) => (
    <span style={{ color: 'var(--orange)', fontFamily: 'var(--font-display)', letterSpacing: '0.1em', fontSize: 16, lineHeight: 1 }}>
      {'★'.repeat(n)}<span style={{ color: 'rgba(61,47,35,0.2)' }}>{'★'.repeat(5 - n)}</span>
    </span>
  );

  return (
    <section id="reviews" style={{ background: 'var(--paper-warm)', padding: '0' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '96px 36px' }}>
        <SectionHead
          eyebrow="03 / Postcards from the beach"
          title={
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 'clamp(48px, 6.4vw, 104px)',
              lineHeight: 0.92, textTransform: 'uppercase', letterSpacing: '0.005em',
              color: 'var(--brown)', margin: 0,
            }}>
              What people<br/>
              write home <span style={{ fontFamily: 'var(--font-script)', textTransform: 'none', color: 'var(--orange)', fontSize: '0.82em', display: 'inline-block', transform: 'rotate(-3deg)' }}>about.</span>
            </h2>
          }
          right={
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, fontSize: 14, color: 'var(--brown-soft)', lineHeight: 1.5 }}>
              <div style={{ display: 'flex', gap: 18, alignItems: 'baseline' }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 56, color: 'var(--orange)', lineHeight: 1, letterSpacing: '0.005em' }}>4.9</span>
                <div>
                  <Stars n={5} />
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--brown-soft)', marginTop: 4 }}>4,000+ reviews</div>
                </div>
              </div>
              <p style={{ margin: 0 }}>Three decades of beach days, sun-warmed bottles, and people writing in to say thanks. Here are the latest postcards.</p>
            </div>
          }
        />
        <div className="hws-mobile-scroller" data-scroller-cards="4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22 }}>
          {reviews.map((r, idx) => (
            <div key={idx} style={{
              position: 'relative',
              background: 'var(--paper-soft)',
              padding: '24px 22px 22px',
              borderRadius: 4,
              border: '1.5px solid rgba(61,47,35,0.12)',
              transform: `rotate(${r.rotate}deg)`,
              boxShadow: '0 12px 28px -16px rgba(61,47,35,0.4), 0 2px 0 rgba(61,47,35,0.12)',
              display: 'flex', flexDirection: 'column', gap: 14, minHeight: 320,
            }}>
              {/* Vintage postage stamp top-right */}
              <div style={{
                position: 'absolute', top: -10, right: -8,
                width: 56, height: 56, borderRadius: '50%',
                background: 'var(--sun)', color: 'var(--brown)',
                display: 'grid', placeItems: 'center', textAlign: 'center',
                transform: `rotate(${-r.rotate * 4}deg)`,
                border: '2px dashed var(--brown)',
                boxShadow: '0 4px 10px rgba(0,0,0,0.18)',
                fontFamily: 'var(--font-display)', fontSize: 11,
                letterSpacing: '0.06em', textTransform: 'uppercase',
                lineHeight: 1,
              }}>
                <div>
                  <div style={{ fontSize: 14 }}>★ 5/5</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 7.5, letterSpacing: '0.12em', marginTop: 2 }}>{r.stamp}</div>
                </div>
              </div>

              <Stars n={r.stars} />

              <p style={{
                fontFamily: 'var(--font-body)', fontSize: 14.5, color: 'var(--brown)',
                lineHeight: 1.55, margin: 0, flex: 1,
              }}>"{r.quote}"</p>

              <div style={{
                borderTop: '1.5px dashed rgba(61,47,35,0.2)',
                paddingTop: 14,
                display: 'flex', flexDirection: 'column', gap: 6,
              }}>
                <div style={{ fontFamily: 'var(--font-script)', fontSize: 22, color: 'var(--orange)', lineHeight: 1, transform: 'rotate(-2deg)', alignSelf: 'flex-start' }}>{r.name}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--brown-soft)' }}>
                  {r.city} · {r.product}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ProductGrid, MascotMoment, Story, SunDayRitual, WhereToBuy, Reviews, Footer });