// SECTIONS — How it works · Freshness promise · Story · FAQ · Footer.
function HowItWorks() {
  const Icon = window.Icon;
  const steps = [
    { icon: 'MousePointerClick', t: 'Choose your flavour', d: 'Slide through the cans and pick your Shoyuzuke.' },
    { icon: 'ShoppingBag', t: 'Add to cart', d: 'Build your order — stack flavours and Mayak Eggs.' },
    { icon: 'Snowflake', t: 'Chilled delivery or pickup', d: 'Packed with ice, handed to a same-day courier.' },
    { icon: 'Utensils', t: 'Refrigerate & enjoy', d: 'Chill on arrival, then eat over rice or as sashimi.' },
  ];
  return (
    <section id="how" className="section">
      <div className="container container-wide">
        <div style={{ textAlign: 'center', marginBottom: 'var(--space-6)' }}>
          <span className="t-eyebrow" style={{ color: 'var(--shoyu-orange)' }}>How it works</span>
          <h2 className="t-h2" style={{ fontSize: 'var(--text-2xl)', color: 'var(--text-strong)', marginTop: 10 }}>From can to rice bowl in four steps</h2>
        </div>
        <div className="sz-steps" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-4)' }}>
          {steps.map((s, i) => (
            <div key={s.t} style={{ background: 'rgba(28,23,20,0.50)', backdropFilter: 'blur(18px)', WebkitBackdropFilter: 'blur(18px)', border: '1px solid rgba(251,244,234,0.09)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-5)', boxShadow: '0 2px 0 rgba(251,244,234,0.04) inset, 0 14px 40px rgba(0,0,0,0.5)' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{ width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'rgba(240,96,34,0.12)', border: '1px solid var(--border-orange)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--shoyu-orange)' }}><Icon name={s.icon} size={22} /></span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 30, color: 'var(--surface-raised)', WebkitTextStroke: '1px var(--border-strong)' }}>{i + 1}</span>
              </div>
              <h3 style={{ fontFamily: 'var(--font-head)', fontWeight: 800, fontSize: 16.5, color: 'var(--text-strong)', marginTop: 16 }}>{s.t}</h3>
              <p className="t-body" style={{ color: 'var(--text-muted)', fontSize: 14, marginTop: 6 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StoryPromise() {
  const Icon = window.Icon;
  const promises = [
    { icon: 'Fish', t: 'Sashimi-grade only', d: 'We cut from fish we would eat raw ourselves.' },
    { icon: 'Snowflake', t: 'Cold the whole way', d: 'Packed with ice and delivered same-day, chilled.' },
    { icon: 'CalendarClock', t: 'Made to order', d: 'Marinated in small batches — never sitting on a shelf.' },
  ];
  return (
    <section className="section" style={{ background: 'transparent' }}>
      <div className="container container-wide sz-story" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-7)', alignItems: 'center' }}>
        <div className="spotlight" style={{ borderRadius: 'var(--radius-2xl)', overflow: 'hidden', aspectRatio: '4/3' }}>
          <img src="assets/lifestyle/flatlay-original.jpg" alt="Shoyuzuke spread" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
        <div>
          <span className="t-eyebrow" style={{ color: 'var(--shoyu-orange)' }}>Our story</span>
          <h2 className="t-h2" style={{ fontSize: 'var(--text-2xl)', color: 'var(--text-strong)', marginTop: 10 }}>Started in an apartment kitchen</h2>
          <p className="t-lead" style={{ color: 'var(--text-muted)', marginTop: 12 }}>
            Shoyuzuke began as a small-batch marinade made at home for friends. Real demand turned it into a can you can order across the city — same recipe, same care, now made practical.
          </p>
          <div style={{ display: 'grid', gap: 'var(--space-3)', marginTop: 'var(--space-5)' }}>
            {promises.map((p) => (
              <div key={p.t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <span style={{ width: 40, height: 40, flexShrink: 0, borderRadius: 'var(--radius-md)', background: 'rgba(28,23,20,0.55)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--salmon-300)' }}><Icon name={p.icon} size={19} /></span>
                <div>
                  <div style={{ fontFamily: 'var(--font-head)', fontWeight: 800, fontSize: 15.5, color: 'var(--text-strong)' }}>{p.t}</div>
                  <div className="t-body" style={{ color: 'var(--text-muted)', fontSize: 14 }}>{p.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ({ items }) {
  const Icon = window.Icon;
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section">
      <div className="container" style={{ maxWidth: 760 }}>
        <div style={{ textAlign: 'center', marginBottom: 'var(--space-6)' }}>
          <span className="t-eyebrow" style={{ color: 'var(--shoyu-orange)' }}>FAQ</span>
          <h2 className="t-h2" style={{ fontSize: 'var(--text-2xl)', color: 'var(--text-strong)', marginTop: 10 }}>Ordering, payment & delivery</h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {items.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ background: 'rgba(28,23,20,0.50)', backdropFilter: 'blur(18px)', WebkitBackdropFilter: 'blur(18px)', border: `1px solid ${isOpen ? 'var(--border-orange)' : 'rgba(251,244,234,0.09)'}`, borderRadius: 'var(--radius-md)', overflow: 'hidden', transition: 'border-color var(--dur-base)', boxShadow: '0 2px 0 rgba(251,244,234,0.04) inset, 0 8px 24px rgba(0,0,0,0.4)' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 12, padding: 'var(--space-4) var(--space-5)', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left' }}>
                  <span style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 16, color: 'var(--text-strong)', flex: 1 }}>{f.q}</span>
                  <span style={{ color: 'var(--shoyu-orange)', transform: isOpen ? 'rotate(45deg)' : 'none', transition: 'transform var(--dur-base) var(--ease-out)' }}><Icon name="Plus" size={20} /></span>
                </button>
                {isOpen && <p className="t-body" style={{ color: 'var(--text-muted)', padding: '0 var(--space-5) var(--space-5)', maxWidth: 620 }}>{f.a}</p>}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const Icon = window.Icon;
  return (
    <footer style={{ background: 'var(--shoyu-orange)', color: 'var(--soy-black)', position: 'relative', overflow: 'hidden' }}>
      <div className="wave-lines" style={{ position: 'absolute', inset: 0, opacity: 0.25, pointerEvents: 'none' }} />
      <div className="container container-wide" style={{ position: 'relative', paddingBlock: 'var(--space-8)' }}>
        <div className="sz-footer" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24, flexWrap: 'wrap' }}>
          <div>
            <img src="assets/logo-black.png" alt="Shoyuzuke" style={{ height: 44, width: 'auto' }} />
            <p style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 15, marginTop: 14, maxWidth: 320 }}>Premium marinated sashimi, sealed fresh in a can. Metro Manila · chilled delivery & pickup.</p>
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="https://instagram.com/shoyuzukemnl" target="_blank" rel="noreferrer" style={pillLink}><Icon name="Instagram" size={18} /> shoyuzukemnl</a>
            <a href="https://tiktok.com/@shoyuzukemnl" target="_blank" rel="noreferrer" style={pillLink}><Icon name="Music2" size={18} /> shoyuzukemnl</a>
            <a href="https://www.facebook.com/p/Shoyuzuke-Manila-61569805478631/" target="_blank" rel="noopener noreferrer" style={pillLink}><Icon name="Facebook" size={18} /> Facebook</a>
          </div>
        </div>
        <div style={{ borderTop: '1.5px solid rgba(24,9,3,0.25)', marginTop: 'var(--space-6)', paddingTop: 'var(--space-4)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8, fontSize: 13, fontWeight: 600, fontFamily: 'var(--font-body)' }}>
          <span>© {new Date().getFullYear()} Shoyuzuke MNL · 醤油漬け</span>
          <span>Payments via GCash & bank transfer · manually reviewed</span>
        </div>
      </div>
    </footer>
  );
}
const pillLink = { display: 'inline-flex', alignItems: 'center', gap: 8, padding: '10px 16px', background: 'var(--soy-black)', color: 'var(--shoyu-orange)', borderRadius: 'var(--radius-pill)', fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 14 };
Object.assign(window, { HowItWorks, StoryPromise, FAQ, Footer });