// bakely-sections-2.jsx
// About, Waitlist CTA, Footer sections.

/* ------------------------------------------------------------------ */
/*  FREE PLAN (Stage 1 — no tiers, just what's included free)          */
/* ------------------------------------------------------------------ */

function FreePlan({ onCtaClick }) {
  const included = [
    { icon: '📋', t: '30 orders a month', s: 'Plenty of room for a busy home kitchen' },
    { icon: '📖', t: '10 saved recipes', s: 'Up to 3 photos on each one' },
    { icon: '📅', t: 'Customer reminders', s: 'Prep, bake & pickup, straight to your calendar' },
    { icon: '🥚', t: 'Stock tracking', s: 'Low-stock alerts before you run out' },
    { icon: '🧾', t: 'Unlimited quotes & invoices', s: 'Look professional, every order' },
    { icon: '📤', t: 'Export anywhere', s: 'PDF, DOCX and print' },
  ];

  return (
    <section id="free" style={{ background: 'var(--cream)', padding: '40px 0 96px' }}>
      <div className="wrap">
        <div className="free-card" style={{
          background: 'var(--teal)',
          color: '#fff',
          borderRadius: 32,
          padding: 'clamp(32px, 5vw, 56px)',
          position: 'relative',
          overflow: 'hidden',
          boxShadow: '0 30px 60px -24px rgba(44,95,93,0.45)',
        }}>
          {/* decorative circles */}
          <div aria-hidden="true" style={{
            position: 'absolute', top: -50, right: -50, width: 200, height: 200,
            borderRadius: '50%', background: 'color-mix(in oklab, var(--coral) 28%, var(--teal))', opacity: 0.5,
          }} />
          <div aria-hidden="true" style={{
            position: 'absolute', bottom: -70, left: -40, width: 220, height: 220,
            borderRadius: '50%', background: 'color-mix(in oklab, white 8%, var(--teal))',
          }} />

          <div className="free-grid" style={{
            position: 'relative', zIndex: 1,
            display: 'grid',
            gridTemplateColumns: '1fr 1.2fr',
            gap: 'clamp(32px, 5vw, 64px)',
            alignItems: 'center',
          }}>
            <div>
              <div style={{
                fontFamily: 'Caveat, cursive', fontWeight: 700, fontSize: 26,
                color: 'var(--peach)', transform: 'rotate(-2deg)', marginBottom: 10,
              }}>
                No catch, no card
              </div>
              <h2 className="display" style={{
                fontSize: 'clamp(40px, 6vw, 68px)', margin: 0, color: '#fff', lineHeight: 0.98,
              }}>
                Free during<br /><span style={{ color: 'var(--coral)' }}>early access</span>.
              </h2>
              <p style={{
                fontSize: 17, lineHeight: 1.6, marginTop: 20, maxWidth: 420,
                color: 'color-mix(in oklab, white 82%, var(--teal))',
              }}>
                Every early baker gets the full Bakely free plan while we build. No credit card. No trial countdown. Just the tools, on the house.
              </p>
              <button className="btn btn-primary" style={{ marginTop: 28 }} onClick={onCtaClick}>
                Join the waitlist →
              </button>
            </div>

            <div style={{
              display: 'grid',
              gridTemplateColumns: '1fr 1fr',
              gap: 14,
            }}>
              {included.map((f, i) => (
                <div key={i} style={{
                  background: 'color-mix(in oklab, white 10%, var(--teal))',
                  border: '1px solid color-mix(in oklab, white 14%, transparent)',
                  borderRadius: 16,
                  padding: '16px 16px 18px',
                }}>
                  <div style={{
                    width: 38, height: 38, borderRadius: 10,
                    background: 'color-mix(in oklab, var(--coral) 90%, white)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 18, marginBottom: 10,
                  }}>{f.icon}</div>
                  <div style={{ fontWeight: 700, fontSize: 15, color: '#fff' }}>{f.t}</div>
                  <div style={{ fontSize: 13, lineHeight: 1.4, marginTop: 4, color: 'color-mix(in oklab, white 70%, var(--teal))' }}>
                    {f.s}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) {
          .free-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 480px) {
          .free-grid > div:last-child { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* ------------------------------------------------------------------ */
/*  ABOUT                                                              */
/* ------------------------------------------------------------------ */

function About() {
  return (
    <section id="about" style={{
      background: 'var(--teal)',
      color: '#fff',
      padding: '88px 0 96px',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* decorative arc text */}
      <div aria-hidden="true" style={{
        position: 'absolute',
        top: -40, right: -40,
        width: 240, height: 240,
        borderRadius: '50%',
        background: 'color-mix(in oklab, var(--coral) 30%, var(--teal))',
        opacity: 0.4,
      }} />
      <div aria-hidden="true" style={{
        position: 'absolute',
        bottom: -60, left: -60,
        width: 280, height: 280,
        borderRadius: '50%',
        background: 'color-mix(in oklab, white 8%, var(--teal))',
      }} />

      <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
        <div className="trust-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1.2fr 1fr',
          gap: 56,
          alignItems: 'center',
        }}>
          <div>
            <div style={{
              fontFamily: 'Caveat, cursive',
              fontWeight: 700,
              fontSize: 26,
              color: 'var(--peach)',
              transform: 'rotate(-2deg)',
              marginBottom: 12,
            }}>
              Why we built Bakely
            </div>
            <h2 className="display" style={{
              fontSize: 'clamp(40px, 6vw, 72px)',
              margin: 0,
              color: '#fff',
              lineHeight: 0.98,
            }}>
              We’re not bakers. But we kept watching <span style={{ color: 'var(--coral)' }}>you struggle</span>.
            </h2>

            <div style={{
              fontSize: 17,
              lineHeight: 1.65,
              color: 'color-mix(in oklab, white 82%, var(--teal))',
              maxWidth: 540,
              marginTop: 24,
              display: 'flex',
              flexDirection: 'column',
              gap: 14,
            }}>
              <p style={{ margin: 0 }}>
                A few years ago, we started counting. Friends running cake businesses out of their kitchens. Family running Saturday bakery stalls. Cousins selling koeksisters out the boot of the car. Brilliant at the baking — drowning in the admin around it.
              </p>
              <p style={{ margin: 0 }}>
                WhatsApp orders lost in 200 messages. Recipes on butter-stained Croxley books. Guessing at prices because nobody had time to do the costing. Pickup times that slipped. Profit nobody was sure existed.
              </p>
              <p style={{ margin: 0 }}>
                So we built Bakely. We’re a small team in Joburg who care a lot about good software — and even more about small businesses. Bakely is the calm little tool we wished every baker we knew already had.
              </p>
              <p style={{ margin: 0, color: '#fff', fontWeight: 600 }}>
                Free during early access because we want to get it right <em>with</em> bakers, not <em>at</em> them.
              </p>
            </div>

            <div style={{ display: 'flex', gap: 36, marginTop: 32, flexWrap: 'wrap' }}>
              <Stat n="One screen" l="for your whole week" />
              <Stat n="Know your" l="profit on every bake" />
              <Stat n="R0" l="free during early access" />
            </div>
          </div>

          {/* photo / quote card */}
          <div style={{ position: 'relative', minHeight: 460 }}>
            {/* photo */}
            <div style={{
              position: 'absolute',
              top: 0, left: 0,
              width: '92%',
              aspectRatio: '1/1',
              borderRadius: 18,
              overflow: 'hidden',
              transform: 'rotate(-3deg)',
              border: '8px solid #fff',
              boxShadow: '0 24px 48px -16px rgba(0,0,0,0.3)',
              background: '#1a1410',
            }}>
              <img
                src="team.jpg"
                alt="A diverse group of South African bakers at work in a Joburg kitchen"
                style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 38%', display: 'block' }}
              />
            </div>

            {/* quote sticky note */}
            <div style={{
              position: 'absolute',
              bottom: 12, right: 0,
              width: '64%',
              background: '#FDEADD',
              color: 'var(--espresso)',
              padding: '20px 22px',
              borderRadius: 16,
              transform: 'rotate(3deg)',
              boxShadow: '0 18px 36px -14px rgba(0,0,0,0.35)',
            }}>
              <div style={{ fontSize: 32, lineHeight: 1, color: 'var(--coral)', fontFamily: 'Fraunces, serif', fontWeight: 700 }}>“</div>
              <div style={{ fontSize: 15, lineHeight: 1.5, marginTop: -4 }}>
                Bakely is the notebook we wish we had.
              </div>
              <div style={{ marginTop: 12, fontSize: 13, color: 'var(--espresso-soft)' }}>
                — the Bakely team · Joburg
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) {
          .trust-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
      `}</style>
    </section>
  );
}

function Stat({ n, l }) {
  return (
    <div>
      <div className="display" style={{ fontSize: 32, color: '#fff' }}>{n}</div>
      <div style={{ fontSize: 13, color: 'color-mix(in oklab, white 70%, var(--teal))', marginTop: 4 }}>{l}</div>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  WAITLIST CTA                                                       */
/* ------------------------------------------------------------------ */

function WaitlistCTA({ onSubmitEmail, submitted, email, setEmail, name, setName, error, formRef, extra, setExtra }) {
  return (
    <section id="contact" ref={formRef} style={{ background: 'var(--peach)', padding: '88px 0 96px', position: 'relative', overflow: 'hidden' }}>
      {/* decorative bread */}
      <div aria-hidden="true" style={{ position: 'absolute', top: 40, left: '6%', fontSize: 56, opacity: 0.25, transform: 'rotate(-12deg)' }}>🥐</div>
      <div aria-hidden="true" style={{ position: 'absolute', bottom: 40, right: '8%', fontSize: 64, opacity: 0.25, transform: 'rotate(14deg)' }}>🍞</div>
      <div aria-hidden="true" style={{ position: 'absolute', top: '40%', right: '12%', color: 'var(--coral)' }}>
        <Sparkle size={24} />
      </div>
      <div aria-hidden="true" style={{ position: 'absolute', top: '20%', left: '14%', color: 'var(--coral)' }}>
        <Sparkle size={18} />
      </div>

      <div className="wrap" style={{ position: 'relative', zIndex: 1, textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
        <Eyebrow>Be first in line</Eyebrow>
        <h2 className="display" style={{
          fontSize: 'clamp(36px, 6vw, 64px)',
          margin: '12px 0 16px',
          color: 'var(--espresso)',
        }}>
          Ready to take the stress<br />out of <span style={{ color: 'var(--coral)' }}>orders</span>?
        </h2>
        <p style={{ color: 'var(--espresso-soft)', fontSize: 17, lineHeight: 1.55, margin: '0 auto 32px', maxWidth: 520 }}>
          Spend less time on admin and more time baking — and finally know what every order really earns you. Bakely is free during early access. No credit card, no catch.
        </p>

        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <WaitlistForm
            onSubmit={onSubmitEmail}
            submitted={submitted}
            email={email} setEmail={setEmail}
            name={name} setName={setName}
            error={error}
            extra={extra} setExtra={setExtra}
          />
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------------ */
/*  FOOTER                                                             */
/* ------------------------------------------------------------------ */

function Footer() {
  return (
    <footer style={{
      background: 'var(--espresso)',
      color: 'color-mix(in oklab, white 70%, var(--espresso))',
      padding: '56px 0 32px',
    }}>
      <div className="wrap">
        <div className="footer-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
          gap: 32,
          marginBottom: 36,
        }}>
          <div>
            <BakelyLogo size={32} color="#fff" />
            <p style={{ marginTop: 16, fontSize: 14, lineHeight: 1.55, maxWidth: 280, color: 'color-mix(in oklab, white 60%, var(--espresso))' }}>
              Bakery management for home bakers and small bakeries — built in Joburg, made for SA.
            </p>
          </div>
          <FooterCol title="Product" links={[['Why Bakely', '#diagram'], ['Features', '#features'], ['Free plan', '#free']]} />
          <FooterCol title="Company" links={[['About', '#about'], ['Privacy', 'Privacy.html'], ['Terms', 'Terms.html']]} />
          <FooterCol title="Talk to us" links={[
            ['hello@bakely.co.za', 'mailto:hello@bakely.co.za'],
            ['Instagram →', '#'],
            ['WhatsApp community →', 'https://wa.me/27000000000'],
          ]} />
        </div>
        <div style={{
          paddingTop: 24,
          borderTop: '1px solid color-mix(in oklab, white 12%, var(--espresso))',
          display: 'flex',
          justifyContent: 'space-between',
          fontSize: 13,
          flexWrap: 'wrap',
          gap: 12,
        }}>
          <span>© 2026 Bakely. Made in Joburg, South Africa.</span>
          <span>🇿🇦 ZAR · Proudly South African</span>
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; }
          .footer-grid > div:first-child { grid-column: 1 / -1 !important; }
        }
      `}</style>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div style={{ color: '#fff', fontWeight: 700, fontSize: 14, marginBottom: 14 }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {links.map(([l, h], i) => (
          <a key={i} href={h} style={{
            color: 'color-mix(in oklab, white 70%, var(--espresso))',
            textDecoration: 'none',
            fontSize: 14,
          }}>{l}</a>
        ))}
      </div>
    </div>
  );
}

/* expose */
Object.assign(window, { FreePlan, About, WaitlistCTA, Footer, FooterCol, Stat });