// bakely-sections.jsx
// All section + visual components for the Bakely brochure.
// Exposes everything on window so bakely-app.jsx can compose them.

const { useState, useEffect, useRef } = React;

/* ------------------------------------------------------------------ */
/*  Visual primitives                                                  */
/* ------------------------------------------------------------------ */

function Sparkle({ size = 18, style = {}, className = "" }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} className={className} style={style} aria-hidden="true">
      <path d="M12 1.5c.6 4.4 3.6 7.4 8 8-4.4.6-7.4 3.6-8 8-.6-4.4-3.6-7.4-8-8 4.4-.6 7.4-3.6 8-8z" fill="currentColor"/>
    </svg>
  );
}

function ScallopDivider({ from, to, flip = false, height = 56 }) {
  // wavy scallop separator — fills with `to` color, draws onto `from` background
  const path = "M0,32 C120,80 240,0 360,32 C480,64 600,8 720,32 C840,56 960,8 1080,32 C1200,56 1320,8 1440,32 L1440,80 L0,80 Z";
  return (
    <div style={{ background: from, lineHeight: 0, transform: flip ? 'scaleY(-1)' : 'none' }}>
      <svg className="scallop" viewBox="0 0 1440 80" preserveAspectRatio="none" style={{ height, display: 'block' }}>
        <path d={path} fill={to} />
      </svg>
    </div>
  );
}

function BakelyLogo({ size = 28, color }) {
  // friendly serif lowercase 'bakely.' with the period as a tiny bread loaf
  return (
    <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 0, color: color || 'var(--espresso)' }}>
      <span className="display-sm" style={{
        fontSize: size,
        fontVariationSettings: '"SOFT" 100, "WONK" 1, "opsz" 36',
        fontWeight: 700,
        lineHeight: 1,
        letterSpacing: '-0.02em',
      }}>
        bakely
      </span>
      <span aria-hidden="true" style={{
        display: 'inline-block',
        width: size * 0.34,
        height: size * 0.34,
        marginLeft: size * 0.08,
        marginBottom: -size * 0.02,
        borderRadius: '50% 50% 45% 45% / 60% 60% 40% 40%',
        background: 'var(--coral)',
        boxShadow: `inset 0 -${size * 0.04}px 0 ${size * 0.01}px rgba(0,0,0,0.06), inset ${size * 0.04}px ${size * 0.04}px 0 -${size * 0.02}px rgba(255,255,255,0.4)`,
        transform: 'rotate(-8deg)',
      }} />
    </span>
  );
}

/* ------------------------------------------------------------------ */
/*  Hero phone mockup — a stylized Bakely dashboard                   */
/* ------------------------------------------------------------------ */

function PhoneMockup() {
  return (
    <div style={{
      width: 280,
      maxWidth: '90vw',
      aspectRatio: '280 / 560',
      borderRadius: 38,
      background: '#1a1410',
      padding: 8,
      boxShadow: '0 30px 60px -20px rgba(61,40,24,0.35), 0 12px 24px -10px rgba(61,40,24,0.2)',
      position: 'relative',
      flexShrink: 0,
    }}>
      {/* notch */}
      <div style={{
        position: 'absolute',
        top: 16,
        left: '50%',
        transform: 'translateX(-50%)',
        width: 84,
        height: 22,
        background: '#1a1410',
        borderRadius: 14,
        zIndex: 2,
      }} />
      <div style={{
        width: '100%',
        height: '100%',
        background: 'var(--cream)',
        borderRadius: 30,
        overflow: 'hidden',
        display: 'flex',
        flexDirection: 'column',
        position: 'relative',
      }}>
        {/* status bar */}
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          padding: '14px 22px 0',
          fontSize: 11,
          fontWeight: 600,
          color: 'var(--espresso)',
        }}>
          <span>9:41</span>
          <span style={{ opacity: 0.7 }}>●●●● ▮▮▮</span>
        </div>

        {/* header */}
        <div style={{ padding: '24px 18px 8px' }}>
          <div style={{ fontSize: 11, color: 'var(--espresso-soft)', fontWeight: 500 }}>Tuesday, 5 March</div>
          <div className="display-sm" style={{ fontSize: 24, marginTop: 4, color: 'var(--espresso)' }}>
            Morning, Zanele <span className="sparkle"><Sparkle size={14} /></span>
          </div>
          <div style={{ fontSize: 12, color: 'var(--espresso-soft)', marginTop: 6 }}>
            <b style={{ color: 'var(--coral)' }}>4 orders</b> due today · R1,820
          </div>
        </div>

        {/* orders list */}
        <div style={{ padding: '8px 14px', display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
          <OrderCard customer="Lerato" item="6 choc croissants" time="14:00" amount="R 240" status="baking" />
          <OrderCard customer="Thandi" item="Birthday cake — vanilla" time="16:30" amount="R 680" status="prep" />
          <OrderCard customer="Sipho" item="2 dozen koeksisters" time="17:00" amount="R 360" status="prep" />
          <OrderCard customer="Priya" item="Fridge tart ×3" time="18:00" amount="R 540" status="todo" />
        </div>

        {/* tab bar */}
        <div style={{
          display: 'flex',
          justifyContent: 'space-around',
          padding: '10px 4px 18px',
          borderTop: '1px solid color-mix(in oklab, var(--espresso) 8%, transparent)',
          background: 'var(--peach-soft)',
        }}>
          {[
            { l: 'Orders', active: true, icon: '📋' },
            { l: 'Recipes', icon: '📖' },
            { l: 'Stock', icon: '🥚' },
            { l: 'Me', icon: '👤' },
          ].map(t => (
            <div key={t.l} style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              gap: 2,
              opacity: t.active ? 1 : 0.5,
              color: t.active ? 'var(--coral)' : 'var(--espresso)',
              fontWeight: t.active ? 700 : 500,
              fontSize: 10,
            }}>
              <span style={{ fontSize: 16, filter: t.active ? 'none' : 'grayscale(0.4)' }}>{t.icon}</span>
              {t.l}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function OrderCard({ customer, item, time, amount, status }) {
  const statusMap = {
    baking: { label: 'Baking', bg: 'color-mix(in oklab, var(--coral) 15%, white)', fg: 'var(--coral-deep)' },
    prep: { label: 'Prep', bg: 'color-mix(in oklab, var(--teal) 12%, white)', fg: 'var(--teal-deep)' },
    todo: { label: 'To-do', bg: '#eee5d8', fg: 'var(--espresso-soft)' },
  };
  const s = statusMap[status];
  return (
    <div style={{
      background: '#fff',
      borderRadius: 14,
      padding: '10px 12px',
      boxShadow: '0 2px 0 -1px rgba(61,40,24,0.06)',
      display: 'flex',
      flexDirection: 'column',
      gap: 4,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ fontWeight: 700, fontSize: 12, color: 'var(--espresso)' }}>{customer}</span>
        <span style={{
          fontSize: 9,
          fontWeight: 700,
          textTransform: 'uppercase',
          letterSpacing: 0.4,
          padding: '2px 7px',
          borderRadius: 999,
          background: s.bg,
          color: s.fg,
        }}>{s.label}</span>
      </div>
      <div style={{ fontSize: 11, color: 'var(--espresso-soft)' }}>{item}</div>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--espresso-soft)' }}>
        <span>🕐 {time}</span>
        <span style={{ fontWeight: 700, color: 'var(--espresso)' }}>{amount}</span>
      </div>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  NAV                                                                */
/* ------------------------------------------------------------------ */

function Nav({ onWaitlistClick, active }) {
  const [open, setOpen] = useState(false);

  const scrollTo = (id) => {
    setOpen(false);
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <header style={{
      position: 'sticky',
      top: 0,
      zIndex: 50,
      background: 'color-mix(in oklab, var(--cream) 92%, transparent)',
      backdropFilter: 'blur(10px)',
      WebkitBackdropFilter: 'blur(10px)',
      borderBottom: '1px solid color-mix(in oklab, var(--espresso) 6%, transparent)',
    }}>
      <div className="wrap" style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: 68,
      }}>
        <a href="#top" onClick={(e) => { e.preventDefault(); scrollTo('top'); }}>
          <BakelyLogo size={28} />
        </a>

        <nav className="desktop-nav" style={{
          display: 'flex', alignItems: 'center', gap: 32,
        }}>
          {[['Why Bakely', 'diagram'], ['Features', 'features'], ['About', 'about'], ['Contact', 'contact']].map(([l, id]) => (
            <a
              key={id}
              className="nav-link"
              onClick={(e) => { e.preventDefault(); scrollTo(id); }}
              href={`#${id}`}
              style={active === id ? { color: 'var(--coral)', opacity: 1 } : undefined}
            >
              {l}
            </a>
          ))}
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <button
            className="btn btn-primary mobile-hide"
            style={{ height: 44, padding: '0 18px', fontSize: 14 }}
            onClick={onWaitlistClick}
          >
            Join the waitlist
          </button>
          <button
            aria-label="Menu"
            className="mobile-only"
            onClick={() => setOpen(o => !o)}
            style={{
              display: 'none',
              width: 44, height: 44,
              border: 'none',
              background: 'transparent',
              cursor: 'pointer',
              color: 'var(--espresso)',
            }}
          >
            <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              {open ? <><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></> : <><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></>}
            </svg>
          </button>
        </div>
      </div>

      {open && (
        <div className="sheet-in" style={{
          background: 'var(--cream)',
          borderTop: '1px solid color-mix(in oklab, var(--espresso) 6%, transparent)',
          padding: '16px 24px 24px',
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            {[['Why Bakely', 'diagram'], ['Features', 'features'], ['About', 'about'], ['Contact', 'contact']].map(([l, id]) => (
              <a key={id} className="nav-link" style={{ fontSize: 18 }} href={`#${id}`} onClick={(e) => { e.preventDefault(); scrollTo(id); }}>{l}</a>
            ))}
            <button className="btn btn-primary" onClick={() => { setOpen(false); onWaitlistClick(); }}>
              Join the waitlist
            </button>
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 820px) {
          .desktop-nav { display: none !important; }
          .mobile-only { display: inline-flex !important; }
          .mobile-hide { display: none !important; }
        }
      `}</style>
    </header>
  );
}

/* ------------------------------------------------------------------ */
/*  HERO                                                               */
/* ------------------------------------------------------------------ */

function Hero({ onSubmitEmail, submitted, email, setEmail, name, setName, error, extra, setExtra }) {
  return (
    <section id="top" style={{
      background: 'var(--cream)',
      position: 'relative',
      paddingTop: 48,
      paddingBottom: 24,
      overflow: 'hidden',
    }}>
      {/* corner sparkles */}
      <div aria-hidden="true" style={{ position: 'absolute', top: 80, left: '6%', color: 'var(--sparkle)' }}>
        <Sparkle size={28} />
      </div>
      <div aria-hidden="true" style={{ position: 'absolute', top: 140, right: '8%', color: 'var(--sparkle)' }}>
        <Sparkle size={20} />
      </div>

      <div className="wrap hero-grid" style={{
        display: 'grid',
        gridTemplateColumns: '1.1fr 1fr',
        gap: 48,
        alignItems: 'center',
      }}>
        <div>
          <div style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 8,
            padding: '6px 14px 6px 8px',
            borderRadius: 999,
            background: 'color-mix(in oklab, var(--teal) 8%, white)',
            color: 'var(--teal-deep)',
            fontSize: 13,
            fontWeight: 600,
            marginBottom: 24,
            border: '1px solid color-mix(in oklab, var(--teal) 18%, transparent)',
          }}>
            <span style={{
              width: 22, height: 22, borderRadius: 999, background: 'var(--teal)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              color: '#fff', fontSize: 12,
            }}>🇿🇦</span>
            Made in Joburg · ZAR + calendar reminders built in
          </div>

          <h1 className="display hero-h1" style={{
            fontSize: 'clamp(44px, 8vw, 88px)',
            margin: 0,
            color: 'var(--espresso)',
          }}>
            Bake more.<br />
            <span className="scribble" style={{ color: 'var(--coral)' }}>Stress less.</span>
          </h1>

          <p style={{
            fontSize: 'clamp(16px, 1.6vw, 19px)',
            lineHeight: 1.55,
            color: 'var(--espresso-soft)',
            maxWidth: 480,
            marginTop: 20,
            marginBottom: 28,
          }}>
            Built for SA home bakers who take orders every day — manage your orders, recipes, stock and reminders from your phone. <b style={{color:'var(--coral)'}}>Free during early access.</b>
          </p>

          <WaitlistForm
            compact
            onSubmit={onSubmitEmail}
            submitted={submitted}
            email={email} setEmail={setEmail}
            name={name} setName={setName}
            error={error}
            extra={extra} setExtra={setExtra}
          />

          <div style={{
            marginTop: 16,
            display: 'flex',
            alignItems: 'center',
            gap: 14,
            flexWrap: 'wrap',
            fontSize: 13,
            fontWeight: 500,
            color: 'var(--espresso-soft)',
          }}>
            {['Works on any phone', 'Nothing to download', 'Just open the link'].map((t, i) => (
              <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
                <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--coral)' }} />
                {t}
              </span>
            ))}
          </div>
        </div>

        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 540 }}>
          {/* blob behind phone */}
          <div aria-hidden="true" style={{
            position: 'absolute',
            width: 360, height: 360,
            background: 'var(--peach)',
            borderRadius: '46% 54% 38% 62% / 56% 44% 60% 40%',
            top: '50%', left: '50%',
            transform: 'translate(-50%, -50%) rotate(8deg)',
            filter: 'blur(0.3px)',
          }} />

          <div className="float-y" style={{ position: 'relative', zIndex: 1 }}>
            <PhoneMockup />
          </div>

          {/* floating sticker: calendar reminder */}
          <div className="float-y-slow" style={{
            position: 'absolute',
            left: '-2%',
            top: '18%',
            background: '#fff',
            padding: '10px 14px',
            borderRadius: 18,
            boxShadow: '0 12px 24px -10px rgba(61,40,24,0.25)',
            fontSize: 12,
            maxWidth: 210,
            transform: 'rotate(-6deg)',
            zIndex: 2,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontWeight: 700, color: 'var(--teal)', fontSize: 11, marginBottom: 6 }}>
              <span style={{
                width: 22, height: 22, background: 'var(--teal)', borderRadius: 6,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                color: '#fff', fontSize: 10, fontWeight: 800,
              }}>📅</span>
              Reminder · today, 13:30
            </div>
            <div style={{ color: 'var(--espresso)', fontWeight: 600, lineHeight: 1.35, fontSize: 12 }}>
              Lerato’s 6 choc croissants — bake & cool by 14:00 🥐
            </div>
          </div>

          {/* floating sticker: free for now */}
          <div style={{
            position: 'absolute',
            right: '-4%',
            top: '30%',
            background: 'var(--coral)',
            color: '#fff',
            padding: '10px 16px',
            borderRadius: 999,
            fontFamily: 'Fraunces, serif',
            fontVariationSettings: '"WONK" 1, "SOFT" 100',
            fontWeight: 700,
            fontSize: 16,
            transform: 'rotate(8deg)',
            boxShadow: '0 8px 16px -6px rgba(231,111,81,0.5)',
            zIndex: 2,
            textAlign: 'center',
          }}>
            100% free
            <div style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', fontVariationSettings: 'initial', fontWeight: 500, opacity: 0.92, letterSpacing: 0.4 }}>
              for early bakers
            </div>
          </div>

          {/* floating sticker: EFT received */}
          <div style={{
            position: 'absolute',
            right: '4%',
            bottom: '8%',
            background: 'var(--teal)',
            color: '#fff',
            padding: '8px 14px',
            borderRadius: 14,
            fontSize: 12,
            transform: 'rotate(6deg)',
            boxShadow: '0 8px 16px -6px rgba(44,95,93,0.4)',
            zIndex: 2,
            display: 'flex',
            alignItems: 'center',
            gap: 8,
          }}>
            <span style={{ fontSize: 14 }}>💸</span>
            <div>
              <div style={{ fontSize: 10, opacity: 0.8 }}>EFT received</div>
              <div style={{ fontWeight: 700 }}>+R 540</div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .hero-grid > div:last-child { min-height: 480px !important; }
        }
      `}</style>
    </section>
  );
}

function AvatarStack() {
  const avatars = ['#FBDDD0', '#F2A28A', '#A8C8B6', '#E76F51'];
  return (
    <div style={{ display: 'flex' }}>
      {avatars.map((c, i) => (
        <div key={i} style={{
          width: 28, height: 28,
          borderRadius: '50%',
          background: c,
          border: '2px solid var(--cream)',
          marginLeft: i === 0 ? 0 : -10,
          fontSize: 12,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', fontWeight: 700,
        }}>
          {['L', 'T', 'A', 'M'][i]}
        </div>
      ))}
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  WAITLIST FORM                                                      */
/* ------------------------------------------------------------------ */

function WaitlistForm({ compact, onSubmit, submitted, email, setEmail, name, setName, error, extra, setExtra }) {
  const [showMore, setShowMore] = useState(false);
  const e = extra || {};
  const set = (k, v) => setExtra && setExtra({ ...e, [k]: v });
  const toggleChannel = (c) => {
    const cur = e.channels || [];
    set('channels', cur.includes(c) ? cur.filter(x => x !== c) : [...cur, c]);
  };

  if (submitted) {
    return (
      <div style={{
        background: 'color-mix(in oklab, var(--teal) 10%, white)',
        border: '1.5px solid color-mix(in oklab, var(--teal) 30%, transparent)',
        borderRadius: 18,
        padding: '18px 20px',
        display: 'flex',
        alignItems: 'center',
        gap: 14,
        maxWidth: compact ? 480 : 560,
      }}>
        <div style={{
          width: 40, height: 40, borderRadius: '50%',
          background: 'var(--teal)', color: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
          fontSize: 18,
        }}>🎂</div>
        <div>
          <div className="display-sm" style={{ fontSize: 18, color: 'var(--teal-deep)' }}>
            You’re on the list{name ? `, ${name}` : ''}!
          </div>
          <div style={{ fontSize: 14, color: 'var(--espresso-soft)', marginTop: 2 }}>
            We’ll be in touch the moment Bakely is ready. Go bake something nice.
          </div>
        </div>
      </div>
    );
  }

  const selectStyle = {
    height: 48,
    width: '100%',
    border: '1.5px solid color-mix(in oklab, var(--espresso) 14%, transparent)',
    background: '#fff',
    borderRadius: 14,
    padding: '0 16px',
    color: e.orders || e.pain ? 'var(--espresso)' : 'var(--espresso-soft)',
    appearance: 'none',
    cursor: 'pointer',
  };
  const fieldLabel = {
    fontSize: 12,
    fontWeight: 700,
    color: 'var(--espresso)',
    marginBottom: 6,
    display: 'block',
  };

  return (
    <form
      onSubmit={(ev) => { ev.preventDefault(); onSubmit(); }}
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 10,
        maxWidth: compact ? 480 : 560,
      }}
    >
      <div className="form-row" style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        <input
          type="text"
          placeholder="First name"
          value={name}
          onChange={(ev) => setName(ev.target.value)}
          style={{
            flex: '1 1 140px',
            minWidth: 0,
            height: 52,
            border: '1.5px solid color-mix(in oklab, var(--espresso) 14%, transparent)',
            background: '#fff',
            borderRadius: 999,
            padding: '0 20px',
          }}
        />
        <input
          type="email"
          required
          placeholder="you@kitchen.co.za"
          value={email}
          onChange={(ev) => setEmail(ev.target.value)}
          style={{
            flex: '2 1 200px',
            minWidth: 0,
            height: 52,
            border: '1.5px solid color-mix(in oklab, var(--espresso) 14%, transparent)',
            background: '#fff',
            borderRadius: 999,
            padding: '0 20px',
          }}
        />
        <button type="submit" className="btn btn-primary" style={{ flex: '1 1 auto' }}>
          Get early access →
        </button>
      </div>
      {error && (
        <div style={{ fontSize: 13, color: 'var(--coral-deep)', paddingLeft: 4 }}>
          {error}
        </div>
      )}

      {setExtra && (
        <button
          type="button"
          onClick={() => setShowMore(s => !s)}
          style={{
            all: 'unset',
            cursor: 'pointer',
            fontSize: 13,
            fontWeight: 600,
            color: 'var(--teal-deep)',
            paddingLeft: 4,
            display: 'inline-flex',
            alignItems: 'center',
            gap: 6,
            width: 'fit-content',
          }}
        >
          <span style={{ transform: showMore ? 'rotate(90deg)' : 'none', transition: 'transform 0.18s', display: 'inline-block' }}>▸</span>
          Help us build the right thing {showMore ? '' : '(optional, 20 sec)'}
        </button>
      )}

      {setExtra && showMore && (
        <div style={{
          display: 'grid',
          gridTemplateColumns: compact ? '1fr' : '1fr 1fr',
          gap: 14,
          background: 'color-mix(in oklab, var(--peach) 35%, white)',
          border: '1px solid color-mix(in oklab, var(--coral) 18%, transparent)',
          borderRadius: 16,
          padding: 16,
        }}>
          <div>
            <label style={fieldLabel}>How many orders a month?</label>
            <select style={selectStyle} value={e.orders || ''} onChange={(ev) => set('orders', ev.target.value)}>
              <option value="" disabled>Choose one</option>
              {['Under 5', '5–10', '10–20', '20–30', '30+'].map(o => <option key={o} value={o}>{o}</option>)}
            </select>
          </div>
          <div>
            <label style={fieldLabel}>Biggest headache right now?</label>
            <select style={selectStyle} value={e.pain || ''} onChange={(ev) => set('pain', ev.target.value)}>
              <option value="" disabled>Choose one</option>
              {['Forgetting orders', 'Running out of stock', 'Pricing', 'Invoicing', 'All of these'].map(o => <option key={o} value={o}>{o}</option>)}
            </select>
          </div>
          <div style={{ gridColumn: compact ? 'auto' : '1 / -1' }}>
            <label style={fieldLabel}>How do you take orders now?</label>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['Phone call', 'Instagram DM', 'In person', 'Email', 'WhatsApp'].map(c => {
                const on = (e.channels || []).includes(c);
                return (
                  <button
                    type="button"
                    key={c}
                    onClick={() => toggleChannel(c)}
                    style={{
                      cursor: 'pointer',
                      fontFamily: 'inherit',
                      fontSize: 13,
                      fontWeight: 600,
                      padding: '7px 14px',
                      borderRadius: 999,
                      border: on ? '1.5px solid var(--coral)' : '1.5px solid color-mix(in oklab, var(--espresso) 16%, transparent)',
                      background: on ? 'var(--coral)' : '#fff',
                      color: on ? '#fff' : 'var(--espresso)',
                      transition: 'all 0.14s',
                    }}
                  >
                    {c}
                  </button>
                );
              })}
            </div>
          </div>
          <div style={{ gridColumn: compact ? 'auto' : '1 / -1' }}>
            <label style={fieldLabel}>Phone model <span style={{ fontWeight: 400, color: 'var(--espresso-soft)' }}>(helps us test on real devices)</span></label>
            <input
              type="text"
              placeholder="e.g. Samsung A14 or iPhone 11"
              value={e.phone || ''}
              onChange={(ev) => set('phone', ev.target.value)}
              style={{
                height: 48,
                width: '100%',
                border: '1.5px solid color-mix(in oklab, var(--espresso) 14%, transparent)',
                background: '#fff',
                borderRadius: 14,
                padding: '0 16px',
              }}
            />
          </div>
        </div>
      )}

      <div style={{ fontSize: 12, color: 'var(--espresso-soft)', paddingLeft: 4 }}>
        No spam — just one email when we’re ready for you.
      </div>
    </form>
  );
}

/* ------------------------------------------------------------------ */
/*  PROBLEM                                                            */
/* ------------------------------------------------------------------ */

function Problem() {
  const pains = [
    {
      icon: '📱',
      title: 'Orders everywhere',
      copy: 'WhatsApp here, Instagram DMs there, a Post-it on the fridge. One missed message is a lost customer.',
      tilt: -2,
    },
    {
      icon: '📊',
      title: 'Guessing at profit',
      copy: 'Flour up R20. Butter up R15. Are you actually making money on that birthday cake? Probably not sure.',
      tilt: 1.5,
    },
    {
      icon: '⏰',
      title: 'Reminders nobody sent',
      copy: 'Forgetting to remind a customer their pickup is at 3pm — or forgetting yourself the dough is proofing.',
      tilt: -1,
    },
  ];

  return (
    <section id="problem" style={{ background: 'var(--peach-soft)', padding: '72px 0 96px' }}>
      <div className="wrap">
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 48px' }}>
          <Eyebrow>The kitchen problem</Eyebrow>
          <h2 className="display" style={{
            fontSize: 'clamp(32px, 5vw, 52px)',
            margin: '12px 0 16px',
            color: 'var(--espresso)',
          }}>
            Managing orders shouldn’t<br />feel like <span style={{ color: 'var(--coral)' }}>another job</span>.
          </h2>
          <p style={{ color: 'var(--espresso-soft)', fontSize: 17, lineHeight: 1.55, margin: 0 }}>
            You started baking because you love it. Then the admin started eating the joy. Sound familiar?
          </p>
        </div>

        <div className="problem-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 24,
        }}>
          {pains.map((p, i) => (
            <div
              key={i}
              className="stamp"
              style={{
                '--stamp-bg': '#fff',
                borderRadius: 4,
                transform: `rotate(${p.tilt}deg)`,
                boxShadow: '0 12px 32px -16px rgba(61,40,24,0.18)',
                display: 'flex',
                flexDirection: 'column',
                gap: 12,
                padding: 28,
              }}
            >
              <div style={{
                width: 56, height: 56,
                background: 'var(--peach)',
                borderRadius: '50%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: 26,
              }}>{p.icon}</div>
              <div className="display-sm" style={{ fontSize: 24, color: 'var(--espresso)' }}>
                {p.title}
              </div>
              <p style={{ margin: 0, color: 'var(--espresso-soft)', fontSize: 15, lineHeight: 1.5 }}>
                {p.copy}
              </p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) {
          .problem-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
          .problem-grid > div { transform: none !important; }
        }
      `}</style>
    </section>
  );
}

function Eyebrow({ children }) {
  return (
    <div style={{
      display: 'inline-flex',
      alignItems: 'center',
      gap: 8,
      fontFamily: 'Caveat, cursive',
      fontWeight: 700,
      fontSize: 22,
      color: 'var(--coral)',
      transform: 'rotate(-2deg)',
    }}>
      <span style={{ display: 'inline-block', width: 24, height: 2, background: 'var(--coral)', opacity: 0.5 }} />
      {children}
      <span style={{ display: 'inline-block', width: 24, height: 2, background: 'var(--coral)', opacity: 0.5 }} />
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  SOLUTION / FEATURES                                                */
/* ------------------------------------------------------------------ */

function Features() {
  return (
    <section id="features" style={{ background: 'var(--cream)', padding: '88px 0' }}>
      <div className="wrap">
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
          <Eyebrow>What you get</Eyebrow>
          <h2 className="display" style={{
            fontSize: 'clamp(32px, 5vw, 52px)',
            margin: '12px 0 16px',
            color: 'var(--espresso)',
          }}>
            Everything a baker needs,<br />on their <span style={{ color: 'var(--coral)' }}>phone</span>.
          </h2>
          <p style={{ color: 'var(--espresso-soft)', fontSize: 17, lineHeight: 1.55, margin: 0 }}>
            Three things. Done well. Nothing else.
          </p>
        </div>

        <FeatureRow
          tag="01 · Orders"
          title="Every order in one place."
          copy="Customer name, item, due time, deposit, balance. One screen for the whole week — and Bakely puts every order straight onto your calendar."
          bullets={['Daily “what’s baking today” view', 'Auto calendar reminders for prep, bake and pickup', 'EFT proof of payment uploads']}
          mockup={<OrdersMiniMockup />}
        />

        <FeatureRow
          reverse
          tag="02 · Recipes"
          title="Know your profit before you bake."
          copy="Save your recipes with ingredient costs. Bakely tells you what each loaf actually costs to make — and what to charge for it."
          bullets={['Per-recipe cost from live ingredient prices', 'Suggested price with target margin', 'Scale a recipe up 3× without doing the maths']}
          mockup={<RecipeMiniMockup />}
        />

        <FeatureRow
          tag="03 · Stock"
          title="Never run out of flour again."
          copy="Track ingredients as you use them. See what’s low. See what sells. Don’t over-buy butter for orders that never came in."
          bullets={['Low-stock nudges before you start a bake', 'Best-sellers and quiet weeks at a glance', 'Shopping list — generated from this week’s orders']}
          mockup={<StockMiniMockup />}
        />
      </div>
    </section>
  );
}

function FeatureRow({ tag, title, copy, bullets, mockup, reverse }) {
  return (
    <div className="feature-row" style={{
      display: 'grid',
      gridTemplateColumns: '1fr 1fr',
      gap: 64,
      alignItems: 'center',
      padding: '40px 0',
    }}>
      <div style={{ order: reverse ? 2 : 1 }}>
        <div style={{
          fontFamily: 'Inter, sans-serif',
          fontSize: 13,
          fontWeight: 700,
          letterSpacing: 1.2,
          textTransform: 'uppercase',
          color: 'var(--coral)',
          marginBottom: 12,
        }}>{tag}</div>
        <h3 className="display" style={{
          fontSize: 'clamp(28px, 4vw, 40px)',
          margin: 0,
          color: 'var(--espresso)',
        }}>{title}</h3>
        <p style={{ color: 'var(--espresso-soft)', fontSize: 17, lineHeight: 1.55, margin: '16px 0 20px', maxWidth: 460 }}>
          {copy}
        </p>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {bullets.map((b, i) => (
            <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 15, color: 'var(--espresso)' }}>
              <span style={{
                width: 22, height: 22, borderRadius: '50%',
                background: 'color-mix(in oklab, var(--coral) 14%, white)',
                color: 'var(--coral-deep)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 12, fontWeight: 900,
                flexShrink: 0, marginTop: 1,
              }}>✓</span>
              {b}
            </li>
          ))}
        </ul>
      </div>
      <div style={{ order: reverse ? 1 : 2, display: 'flex', justifyContent: 'center' }}>
        {mockup}
      </div>

      <style>{`
        @media (max-width: 820px) {
          .feature-row { grid-template-columns: 1fr !important; gap: 32px !important; padding: 28px 0 !important; }
          .feature-row > div:first-child { order: 1 !important; }
          .feature-row > div:last-child { order: 2 !important; }
        }
      `}</style>
    </div>
  );
}

/* mini "screen" mockups for each feature */
function MiniFrame({ children }) {
  return (
    <div style={{
      width: 340,
      maxWidth: '100%',
      background: '#fff',
      borderRadius: 24,
      padding: 18,
      boxShadow: '0 20px 40px -16px rgba(61,40,24,0.18), 0 0 0 1px color-mix(in oklab, var(--espresso) 6%, transparent)',
      position: 'relative',
    }}>
      <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
        <span style={{ width: 8, height: 8, borderRadius: 4, background: '#FFC7B8' }} />
        <span style={{ width: 8, height: 8, borderRadius: 4, background: '#F5E0BD' }} />
        <span style={{ width: 8, height: 8, borderRadius: 4, background: '#C8DDD4' }} />
      </div>
      {children}
    </div>
  );
}

function OrdersMiniMockup() {
  return (
    <MiniFrame>
      <div style={{ fontFamily: 'Fraunces, serif', fontVariationSettings: '"SOFT" 80, "WONK" 1', fontWeight: 700, fontSize: 22, color: 'var(--espresso)' }}>
        Today · 4 orders
      </div>
      <div style={{ fontSize: 12, color: 'var(--espresso-soft)', marginBottom: 14 }}>R 1,820 expected</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {[
          { c: 'Lerato', i: '6 choc croissants', t: '14:00', a: 'R 240', s: 'baking' },
          { c: 'Thandi', i: 'Vanilla cake', t: '16:30', a: 'R 680', s: 'prep' },
          { c: 'Sipho', i: 'Koeksisters ×24', t: '17:00', a: 'R 360', s: 'prep' },
        ].map((o, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '1fr auto', gap: 6,
            padding: '10px 12px',
            background: 'var(--cream)',
            borderRadius: 12,
          }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700 }}>{o.c}</div>
              <div style={{ fontSize: 11, color: 'var(--espresso-soft)' }}>{o.i} · {o.t}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 13, fontWeight: 700 }}>{o.a}</div>
              <div style={{
                fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.4,
                color: o.s === 'baking' ? 'var(--coral-deep)' : 'var(--teal-deep)',
              }}>{o.s}</div>
            </div>
          </div>
        ))}
      </div>
      <button style={{
        marginTop: 14, width: '100%', height: 38, borderRadius: 999,
        background: 'color-mix(in oklab, var(--teal) 12%, white)',
        color: 'var(--teal-deep)', fontWeight: 700, border: 'none', fontSize: 13,
        cursor: 'default',
      }}>
        📅 Add 3 reminders to calendar
      </button>
    </MiniFrame>
  );
}

function RecipeMiniMockup() {
  const ings = [
    { n: 'Bread flour', q: '500 g', c: 'R 8.40' },
    { n: 'Butter', q: '250 g', c: 'R 22.50' },
    { n: 'Chocolate', q: '120 g', c: 'R 18.00' },
    { n: 'Yeast, sugar, salt', q: '—', c: 'R 4.20' },
  ];
  return (
    <MiniFrame>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div style={{ fontFamily: 'Fraunces, serif', fontVariationSettings: '"SOFT" 80, "WONK" 1', fontWeight: 700, fontSize: 22, color: 'var(--espresso)' }}>
          Choc croissants
        </div>
        <div style={{ fontSize: 11, color: 'var(--espresso-soft)' }}>Makes 12</div>
      </div>
      <div style={{ fontSize: 12, color: 'var(--espresso-soft)', marginBottom: 14 }}>Last baked 2 days ago</div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 12 }}>
        {ings.map((i, k) => (
          <div key={k} style={{ display: 'grid', gridTemplateColumns: '1fr auto auto', gap: 10, padding: '6px 0', borderBottom: '1px dashed color-mix(in oklab, var(--espresso) 10%, transparent)' }}>
            <span>{i.n}</span>
            <span style={{ color: 'var(--espresso-soft)' }}>{i.q}</span>
            <span style={{ fontWeight: 600 }}>{i.c}</span>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 14, padding: '14px 16px',
        background: 'color-mix(in oklab, var(--coral) 10%, white)',
        borderRadius: 14,
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8,
      }}>
        <div>
          <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.8, color: 'var(--espresso-soft)' }}>Costs you</div>
          <div style={{ fontFamily: 'Fraunces, serif', fontSize: 22, fontWeight: 700, color: 'var(--espresso)' }}>R 53.10</div>
        </div>
        <div>
          <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.8, color: 'var(--coral-deep)' }}>Sell for</div>
          <div style={{ fontFamily: 'Fraunces, serif', fontSize: 22, fontWeight: 700, color: 'var(--coral)' }}>R 240</div>
        </div>
      </div>
    </MiniFrame>
  );
}

function StockMiniMockup() {
  const items = [
    { n: 'Bread flour', q: '2.4 kg left', pct: 30, low: true },
    { n: 'Butter', q: '1.1 kg left', pct: 62, low: false },
    { n: 'Eggs', q: '8 left', pct: 22, low: true },
    { n: 'Caster sugar', q: '3.0 kg left', pct: 80, low: false },
  ];
  return (
    <MiniFrame>
      <div style={{ fontFamily: 'Fraunces, serif', fontVariationSettings: '"SOFT" 80, "WONK" 1', fontWeight: 700, fontSize: 22, color: 'var(--espresso)' }}>
        Pantry
      </div>
      <div style={{ fontSize: 12, color: 'var(--espresso-soft)', marginBottom: 14 }}>
        <b style={{ color: 'var(--coral)' }}>2 items low</b> · shopping list ready
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {items.map((it, i) => (
          <div key={i}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', fontSize: 12 }}>
              <span style={{ fontWeight: 600 }}>{it.n}</span>
              <span style={{ color: it.low ? 'var(--coral-deep)' : 'var(--espresso-soft)', fontWeight: it.low ? 700 : 500 }}>
                {it.q} {it.low && '⚠️'}
              </span>
            </div>
            <div style={{
              marginTop: 4, height: 6, borderRadius: 3,
              background: 'color-mix(in oklab, var(--espresso) 6%, transparent)',
              overflow: 'hidden',
            }}>
              <div style={{
                width: `${it.pct}%`,
                height: '100%',
                background: it.low ? 'var(--coral)' : 'var(--teal)',
                borderRadius: 3,
              }} />
            </div>
          </div>
        ))}
      </div>

      <button style={{
        marginTop: 16, width: '100%', height: 38, borderRadius: 999,
        background: 'var(--coral)',
        color: '#fff', fontWeight: 700, border: 'none', fontSize: 13,
        cursor: 'default',
      }}>
        🛒 Build shopping list
      </button>
    </MiniFrame>
  );
}

/* ------------------------------------------------------------------ */
/*  Expose                                                             */
/* ------------------------------------------------------------------ */

Object.assign(window, {
  Sparkle, ScallopDivider, BakelyLogo, PhoneMockup,
  Nav, Hero, WaitlistForm, Problem, Features, Eyebrow,
});