// site-plan-q.jsx — Future of learning, Inbound pitch, CTA, Footer (quirky skin)

const {
  QPAGE, QReveal, qUseMotionEl,
  QSectionLabel, QSquiggle, QUnderline, QSticker, QChip,
} = window;

const pp = QPAGE.palette;
const pf = QPAGE.fonts;

// ── Future of learning ───────────────────────────────────────
function QFutureOfLearning() {
  const bets = [
    {
      k: 'a course that reads your workspace',
      body: "The course should feel like it's been watching you work. It remembers the stack you sell into, the objections you already beat, the workflow you half-built last week. I did a version of this with IELTS24. 9,000 essays graded, each scored against what that student got wrong the last time. Same shape, applied to Clay.",
      icon: 'spiral',
      accent: pp.accent,
    },
    {
      k: 'cohorts for the ones who stay',
      body: "Longer cohorts. More sessions. The people who wanted a badge fall away by week two. The people who wanted to actually think settle in. Build the room for the second group and the first group stops showing up.",
      icon: 'cohort',
      accent: pp.accent2,
    },
    {
      k: 'peers teaching peers',
      body: "A good cohort is warm before the senior operator walks in. Structure it so learners answer each other first. You save mentor hours, you get better retention, and the peers themselves learn twice. Once as a student, once as a teacher.",
      icon: 'peers',
      accent: pp.pop,
    },
  ];

  return (
    <section style={{
      background: pp.bg, color: pp.ink,
      padding: '130px 40px', position: 'relative',
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', position: 'relative' }}>
        <QReveal>
          <QSectionLabel n={6} text="what i'd want to build" color={pp.accent} />
        </QReveal>
        <QReveal>
          <h2 style={{
            fontFamily: pf.displaySans, fontWeight: 600,
            fontSize: 'clamp(36px, 5vw, 68px)', lineHeight: 1.04,
            letterSpacing: '-0.03em', color: pp.ink,
            margin: '18px 0 28px', maxWidth: 1080, textWrap: 'pretty',
          }}>
            The next Clay learner won't sit through a course. They'll sit with one that{' '}
            <QUnderline color={pp.pop} variant="wave">
              <span style={{ fontFamily: pf.display, fontStyle: 'italic', color: pp.accent2 }}>already knows them</span>
            </QUnderline>
            .
          </h2>
        </QReveal>
        <QReveal>
          <p style={{
            fontFamily: pf.display, fontSize: 22, lineHeight: 1.5, color: pp.inkSoft, fontWeight: 400,
            margin: '0 0 72px', maxWidth: 720, textWrap: 'pretty',
          }}>
            The course reads the workspace, not the other way around. It sees which tables you've built, which enrichments you keep retrying, which HTTP block made you quit last Tuesday. Then it teaches from there. I've built this shape once before, for English essays. Three bets on what it looks like for Clay.
          </p>
        </QReveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }} className="bets-grid">
          {bets.map((b, i) => (
            <QReveal key={i}>
              <QBetCard b={b} i={i} />
            </QReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function QBetCard({ b, i }) {
  const MotionDiv = qUseMotionEl('div');
  const rot = [-1.5, 1, -0.8][i];
  return (
    <MotionDiv
      whileHover={{ y: -4, rotate: 0, boxShadow: `7px 7px 0 ${b.accent}` }}
      transition={{ type: 'spring', stiffness: 240, damping: 22 }}
      style={{
        background: pp.paper, border: `1.5px solid ${pp.ink}`,
        padding: '32px 28px', borderRadius: 4, height: '100%',
        display: 'flex', flexDirection: 'column', gap: 18,
        position: 'relative',
        boxShadow: `5px 5px 0 ${b.accent}`,
        transform: `rotate(${rot}deg)`,
      }}
    >
      <QBetIcon name={b.icon} color={b.accent} />
      <div style={{
        fontFamily: pf.mono, fontSize: 10, color: pp.muted,
        letterSpacing: '0.18em', textTransform: 'uppercase',
      }}>bet 0{i + 1} / 03</div>
      <h3 style={{
        fontFamily: pf.display, fontWeight: 400, fontStyle: 'italic',
        fontSize: 26, color: pp.ink, margin: 0, letterSpacing: '-0.01em', lineHeight: 1.15,
      }}>
        {b.k}
      </h3>
      <p style={{ fontFamily: pf.body, fontSize: 14, color: pp.inkSoft, lineHeight: 1.65, margin: 0 }}>{b.body}</p>
    </MotionDiv>
  );
}

function QBetIcon({ name, color }) {
  const c = color;
  if (name === 'spiral') return (
    <svg width="44" height="44" viewBox="0 0 44 44" fill="none">
      <circle cx="22" cy="22" r="4" fill={c} />
      <circle cx="22" cy="22" r="10" stroke={c} strokeWidth="1.8" strokeDasharray="3 2" />
      <circle cx="22" cy="22" r="18" stroke={c} strokeWidth="1.4" strokeDasharray="2 3" opacity="0.5" />
    </svg>
  );
  if (name === 'cohort') return (
    <svg width="44" height="44" viewBox="0 0 44 44" fill="none">
      <circle cx="13" cy="15" r="5" stroke={c} strokeWidth="1.8" />
      <circle cx="31" cy="15" r="5" stroke={c} strokeWidth="1.8" />
      <circle cx="22" cy="30" r="5" stroke={c} strokeWidth="1.8" fill={c} fillOpacity="0.3" />
      <path d="M15 18L20 27M29 18L25 27M17 15L27 15" stroke={c} strokeWidth="1.2" opacity="0.6" />
    </svg>
  );
  return (
    <svg width="44" height="44" viewBox="0 0 44 44" fill="none">
      <path d="M6 34L15 22L24 29L38 10" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx="15" cy="22" r="3" fill={c} />
      <circle cx="24" cy="29" r="3" fill={c} />
      <circle cx="38" cy="10" r="3" fill={c} />
    </svg>
  );
}

// ── Inbound pitch ────────────────────────────────────────────
function QInboundPitch() {
  return (
    <section style={{
      background: pp.bgSoft, color: pp.ink,
      padding: '110px 40px', borderTop: `1.5px dashed ${pp.hair}`,
      borderBottom: `1.5px dashed ${pp.hair}`,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Orange ambient glow, sibling to CTA */}
      <div style={{
        position: 'absolute', top: '-10%', right: '-6%',
        width: 560, height: 560, borderRadius: '50%',
        background: `radial-gradient(circle, ${pp.accent}1A 0%, transparent 65%)`,
        filter: 'blur(50px)', pointerEvents: 'none', zIndex: 0,
      }} />
      <div style={{
        position: 'absolute', bottom: '-20%', left: '10%',
        width: 480, height: 480, borderRadius: '50%',
        background: `radial-gradient(circle, ${pp.pop}18 0%, transparent 65%)`,
        filter: 'blur(50px)', pointerEvents: 'none', zIndex: 0,
      }} />
      <div style={{ maxWidth: 1080, margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <QSticker rotate={8} top={30} right={20} maxWidth={180} color={pp.pop}>
          <span style={{ fontFamily: pf.display, fontStyle: 'italic', fontSize: 15 }}>
            (yes, you)
          </span>
        </QSticker>

        <QReveal>
          <QSectionLabel n={7} text="a small thing i'd ship week one" color={pp.accent2} />
        </QReveal>
        <QReveal>
          <h2 style={{
            fontFamily: pf.displaySans, fontWeight: 600,
            fontSize: 'clamp(32px, 4.4vw, 56px)', lineHeight: 1.06,
            letterSpacing: '-0.03em', color: pp.ink,
            margin: '18px 0 28px', maxWidth: 940, textWrap: 'pretty',
          }}>
            You'll get a{' '}
            <QUnderline color={pp.pop} variant="wave">
              <span style={{ fontFamily: pf.display, fontStyle: 'italic', color: pp.accent }}>hyper-personalized</span>
            </QUnderline>
            {' '}email from me in 24 hours, written for you.
          </h2>
        </QReveal>
        <QReveal>
          <p style={{
            fontFamily: pf.display, fontSize: 22, lineHeight: 1.55, color: pp.inkSoft, fontWeight: 400,
            margin: '0 0 20px', maxWidth: 720, textWrap: 'pretty',
          }}>
            Not a template. Not a sequence. One email, based on what you actually did on this page. Which sections you read, which you skipped, what you came here to find.
          </p>
        </QReveal>
        <QReveal>
          <p style={{
            fontFamily: pf.body, fontSize: 14, color: pp.muted,
            margin: 0, maxWidth: 760, lineHeight: 1.6,
          }}>
            <span style={{ fontFamily: pf.mono, color: pp.accent2, letterSpacing: '0.08em', fontSize: 12 }}>// </span>
            Built on Clay.
          </p>
        </QReveal>
      </div>
    </section>
  );
}

// ── CTA ──────────────────────────────────────────────────────
function QCTA() {
  const [copied, setCopied] = React.useState(false);
  const email = 'akashradadiya@gmail.com';
  const copy = () => {
    navigator.clipboard.writeText(email);
    setCopied(true); setTimeout(() => setCopied(false), 1800);
  };
  return (
    <section id="lets-talk" style={{
      padding: '140px 40px', position: 'relative',
      background: pp.deep, color: pp.deepInk,
      overflow: 'hidden',
    }}>
      {/* Background orb */}
      <div style={{
        position: 'absolute', top: '-10%', left: '50%', transform: 'translateX(-50%)',
        width: 700, height: 700, borderRadius: '50%',
        background: `radial-gradient(circle, ${pp.accent}33 0%, transparent 60%)`,
        filter: 'blur(40px)', pointerEvents: 'none',
      }} />
      {/* Marginalia */}
      <svg aria-hidden="true" style={{ position: 'absolute', top: 60, right: 80, width: 120, height: 120, color: pp.pop, opacity: 0.8, zIndex: 2 }} viewBox="0 0 120 120" fill="none">
        <path d="M 20 100 Q 40 60 60 90 T 100 40" stroke="currentColor" strokeWidth="3" strokeLinecap="round" fill="none" />
        <path d="M 90 48 L 100 40 L 96 52" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      </svg>

      <div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        <QReveal>
          <h2 style={{
            fontFamily: pf.displaySans, fontWeight: 600,
            fontSize: 'clamp(36px, 4.8vw, 66px)', lineHeight: 1.06, letterSpacing: '-0.03em',
            color: pp.deepInk, margin: '0 0 24px', textWrap: 'balance',
          }}>
            Let's talk about the{' '}
            <span style={{ fontFamily: pf.display, fontStyle: 'italic', color: pp.accent, fontWeight: 400 }}>future of learning</span>
            , and whether I'm any fit for Clay.
          </h2>
        </QReveal>
        <QReveal>
          <p style={{
            fontFamily: pf.display, fontSize: 22, fontStyle: 'italic', fontWeight: 400,
            color: pp.deepInk, opacity: 0.78, lineHeight: 1.5, margin: '0 0 44px',
          }}>
            In 30 minutes.
          </p>
        </QReveal>
        <QReveal>
          <div style={{ display: 'inline-flex', gap: 14, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
            <a href={`mailto:${email}?subject=Clay%20Education%20·%2030%20minutes`} style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '15px 26px', borderRadius: 3,
              background: pp.pop, color: pp.ink,
              fontFamily: pf.mono, fontSize: 13, fontWeight: 600, textDecoration: 'none',
              letterSpacing: '0.06em', textTransform: 'uppercase',
              border: `1.5px solid ${pp.ink}`,
              boxShadow: `4px 4px 0 ${pp.accent}`,
              transition: 'transform 160ms, box-shadow 160ms',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = 'translate(-2px,-2px)'; e.currentTarget.style.boxShadow = `6px 6px 0 ${pp.accent}`; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = 'translate(0,0)'; e.currentTarget.style.boxShadow = `4px 4px 0 ${pp.accent}`; }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="4" width="18" height="18" rx="2" />
                <line x1="16" y1="2" x2="16" y2="6" />
                <line x1="8" y1="2" x2="8" y2="6" />
                <line x1="3" y1="10" x2="21" y2="10" />
              </svg>
              <span>send a calendar invite</span>
              <span aria-hidden="true">→</span>
            </a>
            <a href="https://cal.com/akash-radadiya/brain-at-work" target="_blank" rel="noopener" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '14px 24px', borderRadius: 3,
              background: 'transparent', border: `1.5px solid ${pp.pop}`, color: pp.pop,
              fontFamily: pf.mono, fontSize: 13, fontWeight: 600, textDecoration: 'none',
              letterSpacing: '0.06em', textTransform: 'uppercase',
              transition: 'background 160ms, color 160ms, transform 160ms',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.background = pp.pop; e.currentTarget.style.color = pp.ink; e.currentTarget.style.transform = 'translate(-2px,-2px)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = pp.pop; e.currentTarget.style.transform = 'translate(0,0)'; }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="9" />
                <polyline points="12 7 12 12 15 14" />
              </svg>
              <span>book on cal.com</span>
              <span aria-hidden="true">→</span>
            </a>
            <button onClick={copy} title="click to copy email" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '14px 18px', borderRadius: 3,
              background: 'transparent', border: `1.5px dashed ${pp.deepHair}`, color: pp.deepInk,
              fontFamily: pf.mono, fontSize: 12, cursor: 'pointer',
              transition: 'border-color 160ms, color 160ms',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = pp.pop; e.currentTarget.style.color = pp.pop; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = pp.deepHair; e.currentTarget.style.color = pp.deepInk; }}>
              <span>{copied ? '✓ copied' : email}</span>
            </button>
          </div>
        </QReveal>
        <QReveal>
          <div style={{ marginTop: 48, fontFamily: pf.mono, fontSize: 11, color: pp.deepInk, opacity: 0.6, letterSpacing: '0.12em' }}>
            or{' '}
            <a href="https://www.clay.com/blog/clay-certifications" target="_blank" rel="noopener" style={{ color: pp.pop, textDecoration: 'none', borderBottom: `1px dashed ${pp.pop}88` }}>clay blog feature</a>
            <span style={{ margin: '0 12px', opacity: 0.5 }}>·</span>
            <a href="https://www.thebetterindia.com/48075/funstein-surat-wall-painting-artists-chi" target="_blank" rel="noopener" style={{ color: pp.pop, textDecoration: 'none', borderBottom: `1px dashed ${pp.pop}88` }}>better india, funstein</a>
          </div>
        </QReveal>
      </div>
    </section>
  );
}

// ── Footer ───────────────────────────────────────────────────
function QFooter() {
  const { QBrandMark } = window;
  return (
    <footer style={{
      padding: '120px 40px 80px', background: pp.bg,
      fontFamily: pf.mono, fontSize: 11, color: pp.muted, letterSpacing: '0.06em',
      textAlign: 'center', position: 'relative',
      overflow: 'visible',
    }}>
      {/* Brand mark straddles the CTA → footer boundary. Roughly half of
          it sits above (dark CTA section) and half below (eggshell footer).
          Achieved with negative top margin pulling it up past the section edge. */}
      <div style={{
        position: 'absolute',
        top: 0, left: '50%',
        transform: 'translate(-50%, -50%)',
        display: 'flex', justifyContent: 'center', zIndex: 5,
        pointerEvents: 'none',
      }}>
        {QBrandMark ? <QBrandMark height={160} /> : null}
      </div>
      <a href="https://telzi.com/5pdtez70" target="_blank" rel="noopener"
        style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          padding: '14px 24px', borderRadius: 3,
          background: '#0A66C2',
          color: '#fff', textDecoration: 'none',
          fontFamily: pf.mono, fontSize: 12, fontWeight: 600, letterSpacing: '0.08em',
          textTransform: 'uppercase',
          border: `1.5px solid ${pp.ink}`,
          boxShadow: `3px 3px 0 ${pp.ink}`,
          transition: 'transform 180ms, box-shadow 180ms',
        }}
        onMouseEnter={(e) => { e.currentTarget.style.transform = 'translate(-2px,-2px)'; e.currentTarget.style.boxShadow = `5px 5px 0 ${pp.ink}`; }}
        onMouseLeave={(e) => { e.currentTarget.style.transform = 'translate(0,0)'; e.currentTarget.style.boxShadow = `3px 3px 0 ${pp.ink}`; }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="#fff">
          <path d="M19 0h-14c-2.76 0-5 2.24-5 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5v-14c0-2.76-2.24-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.27c-.97 0-1.75-.79-1.75-1.76s.78-1.75 1.75-1.75 1.75.78 1.75 1.75-.78 1.76-1.75 1.76zm13.5 12.27h-3v-5.6c0-3.37-4-3.11-4 0v5.6h-3v-11h3v1.76c1.4-2.59 7-2.78 7 2.48v6.76z"/>
        </svg>
        <span>visit Akash Radadiya on LinkedIn</span>
      </a>
      <div style={{ marginTop: 36, fontFamily: pf.mono, fontSize: 11, color: pp.muted, letterSpacing: '0.1em', maxWidth: 1100, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.9 }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', justifyContent: 'center' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <span aria-hidden="true" style={{ fontSize: 14, lineHeight: 1 }}>🇮🇳</span>
            citizen of india
          </span>
          <span style={{ opacity: 0.5 }}>·</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <span aria-hidden="true" style={{ fontSize: 14, lineHeight: 1 }}>🇨🇦</span>
            permanent resident of canada
          </span>
          <span style={{ opacity: 0.5 }}>·</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>happy to work remote or relocate</span>
        </div>
        <div style={{ marginTop: 14, opacity: 0.75, fontFamily: pf.mono, letterSpacing: '0.08em', fontSize: 12 }}>
          no © 2026 AD <span aria-hidden="true" style={{ fontSize: 14 }}>😏</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { QFutureOfLearning, QInboundPitch, QCTA, QFooter });
