// bakely-diagram.jsx
// Before vs After diagram — clickable cards + weekly workflow snapshots.

const { useState: useStateDiag } = React;

const BEFORE_ITEMS = [
  {
    icon: '💬',
    title: 'Orders scattered',
    short: '100 messages, 4 apps, 1 fridge note.',
    detail: 'WhatsApp, Instagram, email, a phone call from your aunty. You scroll for ten minutes to find one order — and you still don\'t know if Mrs M paid the deposit.',
    tilt: -2,
  },
  {
    icon: '🤔',
    title: 'Guessing at prices',
    short: '"Um, R80 sounds about right?"',
    detail: 'Flour up R20. Butter up R15. Eggs again. Are you actually making money on this cake? You don\'t know. You\'re just hoping.',
    tilt: 1.5,
  },
  {
    icon: '📓',
    title: 'Recipes on paper',
    short: 'Notebook + photo + your memory.',
    detail: 'Half the recipes are in a Croxley book covered in butter. The other half are screenshots on your phone. Scaling up to a 3× batch is mental maths every time.',
    tilt: -1,
  },
  {
    icon: '⏰',
    title: 'Reminders that aren\'t',
    short: 'Phone alarms. Maybe a Post-it.',
    detail: 'You set an alarm called "Bake Mrs Mkhize Friday" and snooze it three times. The customer messages on pickup day wondering if it\'s ready.',
    tilt: 2,
  },
];

const AFTER_ITEMS = [
  {
    icon: '📋',
    title: 'One screen for the week',
    short: 'Every order — name, item, time, money.',
    detail: 'Type each order in once. Bakely shows you a clean list for today, this week, this month. Filter by status. Mark as paid. Done.',
    tilt: 1.5,
  },
  {
    icon: '💰',
    title: 'Know your profit',
    short: 'R 53 cost → R 240 sell. R 187 yours.',
    detail: 'Save your recipes with ingredient costs. Bakely does the maths and tells you exactly what to charge for the margin you want.',
    tilt: -2,
  },
  {
    icon: '📖',
    title: 'Recipes that scale',
    short: 'One tap to triple a batch.',
    detail: 'All your recipes in one place, scaleable, with live costing pulled from your stock list. No more butter-stained notebook.',
    tilt: 1,
  },
  {
    icon: '📅',
    title: 'Calendar reminders',
    short: 'Prep, bake, pickup — auto.',
    detail: 'Set a due date once. Bakely drops prep, bake and pickup reminders straight onto your phone calendar. Nothing slips.',
    tilt: -1.5,
  },
];

const WEEKLY = [
  {
    day: 'Monday',
    before: 'Scroll through 50 WhatsApp messages to find this week\'s orders. Miss two.',
    after: 'Open Bakely. See all 8 orders for the week. Plan your bake schedule in 4 minutes.',
  },
  {
    day: 'Wednesday',
    before: 'Forgot a customer\'s deadline — scramble to bake last minute at 9pm.',
    after: 'Calendar pings you at 7am: "Mrs M\'s cake — prep dough today, bake tomorrow."',
  },
  {
    day: 'Friday',
    before: '"Is R60 OK?" Quote on a feeling. Hope you made something.',
    after: 'R 80 charged. R 35 in ingredients. R 45 profit per loaf — confirmed.',
  },
];

/* ------------------------------------------------------------------ */
/*  BeforeAfter section                                                */
/* ------------------------------------------------------------------ */

function BeforeAfter() {
  const [activeBefore, setActiveBefore] = useStateDiag(null);
  const [activeAfter, setActiveAfter] = useStateDiag(null);

  return (
    <section id="diagram" style={{ background: 'var(--peach-soft)', padding: '88px 0 96px' }}>
      <div className="wrap">
        <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 56px' }}>
          <Eyebrow>The why</Eyebrow>
          <h2 className="display" style={{
            fontSize: 'clamp(32px, 5.5vw, 60px)',
            margin: '12px 0 16px',
            color: 'var(--espresso)',
          }}>
            From kitchen chaos<br />to one <span style={{ color: 'var(--coral)' }}>calm screen</span>.
          </h2>
          <p style={{ color: 'var(--espresso-soft)', fontSize: 17, lineHeight: 1.55, margin: 0 }}>
            Tap any card to see what changes. This is what Bakely actually does to your week.
          </p>
        </div>

        {/* Side-by-side */}
        <div className="ba-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1fr auto 1fr',
          gap: 32,
          alignItems: 'start',
        }}>
          {/* BEFORE */}
          <div>
            <ColumnHeading
              label="Before"
              title="Right now, your week"
              color="var(--espresso-soft)"
              bg="rgba(255,255,255,0.5)"
              border="1px dashed color-mix(in oklab, var(--espresso) 25%, transparent)"
            />
            <div className="ba-stack" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {BEFORE_ITEMS.map((it, i) => (
                <DiagramCard
                  key={i}
                  item={it}
                  active={activeBefore === i}
                  onClick={() => setActiveBefore(activeBefore === i ? null : i)}
                  variant="before"
                />
              ))}
            </div>
          </div>

          {/* ARROW */}
          <div className="ba-arrow" style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            alignSelf: 'stretch',
            minHeight: 200,
            paddingTop: 60,
          }}>
            <div style={{
              fontFamily: 'Caveat, cursive',
              fontWeight: 700,
              fontSize: 22,
              color: 'var(--coral)',
              transform: 'rotate(-4deg)',
              marginBottom: 8,
              whiteSpace: 'nowrap',
            }}>
              with Bakely →
            </div>
            <svg viewBox="0 0 80 220" width="80" height="220" style={{ display: 'block' }}>
              <path d="M10,30 Q40,110 70,200" stroke="var(--coral)" strokeWidth="3" fill="none" strokeLinecap="round" strokeDasharray="2 8" />
              <path d="M62,188 L72,202 L56,206" stroke="var(--coral)" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>

          {/* AFTER */}
          <div>
            <ColumnHeading
              label="After"
              title="Your week, with Bakely"
              color="var(--coral)"
              bg="color-mix(in oklab, var(--coral) 10%, white)"
              border="1px solid color-mix(in oklab, var(--coral) 30%, transparent)"
            />
            <div className="ba-stack" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {AFTER_ITEMS.map((it, i) => (
                <DiagramCard
                  key={i}
                  item={it}
                  active={activeAfter === i}
                  onClick={() => setActiveAfter(activeAfter === i ? null : i)}
                  variant="after"
                />
              ))}
            </div>
          </div>
        </div>

        {/* WEEKLY WORKFLOW */}
        <div style={{ marginTop: 80 }}>
          <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 36px' }}>
            <Eyebrow>A real week</Eyebrow>
            <h3 className="display" style={{
              fontSize: 'clamp(26px, 4vw, 40px)',
              margin: '12px 0 8px',
              color: 'var(--espresso)',
            }}>
              Three days. Two versions of you.
            </h3>
          </div>

          <div className="weekly-grid" style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 20,
          }}>
            {WEEKLY.map((w, i) => <WeeklyCard key={i} {...w} />)}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 920px) {
          .ba-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
          .ba-arrow { display: none !important; }
          .weekly-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function ColumnHeading({ label, title, color, bg, border }) {
  return (
    <div style={{
      display: 'flex',
      alignItems: 'center',
      gap: 12,
      padding: '8px 16px',
      borderRadius: 999,
      background: bg,
      border,
      marginBottom: 18,
      width: 'fit-content',
    }}>
      <span style={{
        fontSize: 11,
        fontWeight: 800,
        textTransform: 'uppercase',
        letterSpacing: 1.4,
        color,
      }}>{label}</span>
      <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--espresso)' }}>{title}</span>
    </div>
  );
}

function DiagramCard({ item, active, onClick, variant }) {
  const isAfter = variant === 'after';
  return (
    <button
      onClick={onClick}
      style={{
        all: 'unset',
        cursor: 'pointer',
        background: isAfter ? '#fff' : 'rgba(255,255,255,0.65)',
        borderRadius: 18,
        padding: '16px 18px',
        boxShadow: active
          ? (isAfter
              ? '0 16px 36px -12px rgba(231,111,81,0.35), 0 0 0 2px var(--coral)'
              : '0 12px 28px -12px rgba(61,40,24,0.25), 0 0 0 2px color-mix(in oklab, var(--espresso) 30%, transparent)')
          : (isAfter
              ? '0 4px 14px -8px rgba(61,40,24,0.12), 0 0 0 1px color-mix(in oklab, var(--espresso) 6%, transparent)'
              : '0 2px 8px -4px rgba(61,40,24,0.08), 0 0 0 1px color-mix(in oklab, var(--espresso) 10%, transparent)'),
        transform: active ? 'rotate(0deg) scale(1.02)' : `rotate(${item.tilt}deg)`,
        transition: 'transform 0.22s ease, box-shadow 0.22s ease',
        display: 'flex',
        flexDirection: 'column',
        gap: 10,
      }}
    >
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
        <div style={{
          width: 40, height: 40,
          background: isAfter
            ? 'color-mix(in oklab, var(--coral) 14%, white)'
            : 'color-mix(in oklab, var(--espresso) 8%, white)',
          borderRadius: 12,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 20,
          flexShrink: 0,
          filter: isAfter ? 'none' : 'grayscale(0.4)',
        }}>{item.icon}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="display-sm" style={{
            fontSize: 19,
            color: 'var(--espresso)',
            lineHeight: 1.15,
          }}>{item.title}</div>
          <div style={{
            fontSize: 14,
            color: 'var(--espresso-soft)',
            marginTop: 4,
            lineHeight: 1.45,
          }}>{item.short}</div>
        </div>
        <div aria-hidden="true" style={{
          width: 22, height: 22,
          borderRadius: '50%',
          background: active ? (isAfter ? 'var(--coral)' : 'var(--espresso)') : 'transparent',
          border: active ? 'none' : '1.5px solid color-mix(in oklab, var(--espresso) 20%, transparent)',
          color: '#fff',
          fontSize: 13,
          fontWeight: 900,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          flexShrink: 0,
          transition: 'background 0.18s, transform 0.18s',
          transform: active ? 'rotate(45deg)' : 'rotate(0)',
        }}>
          {active ? '×' : '+'}
        </div>
      </div>
      {active && (
        <div style={{
          marginTop: 4,
          padding: '12px 14px',
          background: isAfter ? 'color-mix(in oklab, var(--coral) 8%, white)' : 'color-mix(in oklab, var(--espresso) 5%, white)',
          borderRadius: 12,
          fontSize: 14,
          lineHeight: 1.55,
          color: 'var(--espresso)',
        }}>
          {item.detail}
        </div>
      )}
    </button>
  );
}

function WeeklyCard({ day, before, after }) {
  return (
    <div style={{
      background: '#fff',
      borderRadius: 22,
      padding: '22px 24px',
      boxShadow: '0 12px 28px -16px rgba(61,40,24,0.18), 0 0 0 1px color-mix(in oklab, var(--espresso) 6%, transparent)',
    }}>
      <div style={{
        display: 'inline-block',
        padding: '4px 12px',
        background: 'var(--peach)',
        color: 'var(--coral-deep)',
        borderRadius: 999,
        fontSize: 12,
        fontWeight: 700,
        letterSpacing: 0.4,
        marginBottom: 14,
      }}>
        {day}
      </div>

      <div style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 14,
      }}>
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            fontSize: 11, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase',
            color: 'var(--espresso-soft)',
            marginBottom: 6,
          }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--espresso-soft)', opacity: 0.5 }} />
            Before
          </div>
          <div style={{ fontSize: 14, color: 'var(--espresso-soft)', lineHeight: 1.5, textDecoration: 'line-through', textDecorationColor: 'color-mix(in oklab, var(--espresso) 25%, transparent)', textDecorationThickness: 1 }}>
            {before}
          </div>
        </div>

        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            fontSize: 11, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase',
            color: 'var(--coral)',
            marginBottom: 6,
          }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--coral)' }} />
            After
          </div>
          <div style={{ fontSize: 15, color: 'var(--espresso)', lineHeight: 1.5, fontWeight: 500 }}>
            {after}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BeforeAfter });