// "What's inside" + issue preview + footer

const InsideCard = ({ idx, title, body, tag, tweaks }) => {
  const p = getPalette(tweaks);
  return (
    <div style={{
      position: 'relative',
      padding: '28px 24px 24px',
      borderRight: '1.5px solid var(--rule)',
    }}>
      <div className="mono" style={{
        fontSize: 11, fontWeight: 600, letterSpacing: '0.22em', textTransform: 'uppercase',
        color: p.accentInk, marginBottom: 14,
      }}>
        §{String(idx).padStart(2,'0')} — {tag}
      </div>
      <h3 style={{
        fontFamily: "'Instrument Serif', serif",
        fontSize: 32, fontWeight: 400, lineHeight: 1.1,
        margin: '0 0 12px',
        letterSpacing: '-0.01em',
      }}>{title}</h3>
      <p style={{ margin: 0, fontSize: 16, lineHeight: 1.5, color: 'var(--ink-soft)' }}>
        {body}
      </p>
    </div>
  );
};

const WhatsInside = ({ tweaks }) => {
  const items = [
    { tag: 'Dispatch',   title: 'The week in onchain AI',     body: 'Five stories, deduped and ranked. The shipping news — not the Twitter noise. If it mattered, it’s here; if it didn’t, it isn’t.' },
    { tag: 'Teardown',   title: 'One protocol, dissected',    body: 'A short teardown of a new model marketplace, agent framework, or compute network. What it does, who built it, what it actually costs.' },
    { tag: 'Builder',    title: 'Tools we’re using ourselves', body: 'Libraries, SDKs, inference endpoints, dev tools. Honest notes from projects we ship with each week — the rough edges included.' },
  ];
  return (
    <section style={{
      background: 'var(--paper)',
      borderBottom: '2px solid var(--ink)',
    }}>
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        padding: '22px 28px',
        borderBottom: '1.5px dashed var(--ink)',
      }}>
        <div className="mono" style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.22em', textTransform: 'uppercase' }}>
          ▼ What’s in every issue
        </div>
        <div className="mono" style={{ fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>
          Three sections · ~5 min · Tuesday 07:00 UTC
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
        {items.map((it, i) => (
          <InsideCard key={i} idx={i+1} {...it} tweaks={tweaks} />
        ))}
      </div>
    </section>
  );
};

const IssuePreview = ({ tweaks }) => {
  const p = getPalette(tweaks);
  const lines = [
    { k: '01', t: 'Anthropic ships an onchain model provenance format',     meta: 'Dispatch · 2 min' },
    { k: '02', t: 'Bittensor subnet 17 — what the leaderboard actually measures', meta: 'Teardown · 4 min' },
    { k: '03', t: 'A week with Ritual: running a local agent against an onchain oracle', meta: 'Builder · 5 min' },
    { k: '04', t: 'Quick hits — Eigenlayer AVS for inference; Modulus proof benchmarks; 3 grant RFPs', meta: 'Ticker · 1 min' },
    { k: '05', t: 'Reader question: is “onchain training” still a meaningful phrase in 2026?',   meta: 'Mailbag · 2 min' },
  ];
  return (
    <section style={{
      background: 'var(--paper)',
      borderBottom: '2px solid var(--ink)',
    }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(260px, 380px) 1fr',
      }}>
        {/* left: sample issue meta */}
        <div style={{
          padding: '44px 32px',
          borderRight: '1.5px solid var(--rule)',
          background: `linear-gradient(180deg, var(--paper), oklch(0.95 0.012 85))`,
        }}>
          <div className="mono" style={{
            fontSize: 11, fontWeight: 600, letterSpacing: '0.22em', textTransform: 'uppercase',
            color: p.accentInk, marginBottom: 18,
          }}>
            ◆ Latest issue — preview
          </div>
          <div style={{
            fontFamily: "'Instrument Serif', serif", fontStyle: 'italic',
            fontSize: 20, lineHeight: 1.25, marginBottom: 14,
          }}>
            Vol. 042 — “The oracle and the agent walk into a bar”
          </div>
          <div className="mono" style={{
            fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
            color: 'var(--ink-soft)',
          }}>
            Tue, 15 Apr 2026 · 1,482 words · 5 min
          </div>

          <div style={{ marginTop: 32, display: 'flex', alignItems: 'center', gap: 12, transform: 'rotate(-1.2deg)' }}>
            <a href="#" className="mono" style={{
              padding: '10px 16px',
              border: '2px solid var(--ink)',
              background: 'var(--paper)',
              color: 'var(--ink)',
              textDecoration: 'none',
              fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase',
              boxShadow: '3px 3px 0 var(--ink)',
              borderRadius: 4,
            }}>Read issue 042</a>
            <ArrowScribble color={p.accent} w={90}/>
          </div>
        </div>

        {/* right: TOC lines */}
        <ol style={{ listStyle: 'none', padding: 0, margin: 0 }}>
          {lines.map((l, i) => (
            <li key={i} style={{
              display: 'grid',
              gridTemplateColumns: '56px 1fr auto',
              alignItems: 'baseline',
              gap: 16,
              padding: '18px 28px',
              borderBottom: i < lines.length - 1 ? '1px dashed var(--rule)' : 'none',
            }}>
              <span className="mono" style={{ color: p.accent, fontWeight: 700, fontSize: 14 }}>
                {l.k}
              </span>
              <span style={{ fontFamily: "'Instrument Serif', serif", fontSize: 22, lineHeight: 1.25 }}>
                {l.t}
              </span>
              <span className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>
                {l.meta}
              </span>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
};

const Quotes = ({ tweaks }) => {
  const p = getPalette(tweaks);
  const qs = [
    { q: 'The only AI-x-crypto newsletter I don’t archive. It makes Tuesday morning usable.', a: 'Maya L.', r: 'protocol engineer, Ritual' },
    { q: 'Reads like somebody who actually ships, not somebody who actually tweets.', a: 'Hiro T.', r: 'founder, stealth' },
    { q: 'Short, skeptical, and weirdly funny about block explorers.', a: 'Priya S.', r: 'research, L1 foundation' },
  ];
  return (
    <section style={{
      background: `linear-gradient(180deg, var(--paper), oklch(0.95 0.012 85))`,
      borderBottom: '2px solid var(--ink)',
      padding: '48px 28px',
    }}>
      <div className="mono" style={{
        fontSize: 12, fontWeight: 600, letterSpacing: '0.22em', textTransform: 'uppercase',
        marginBottom: 24,
      }}>
        ▼ What readers said (unprompted, in our inbox)
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }}>
        {qs.map((it, i) => (
          <figure key={i} style={{ margin: 0 }}>
            <blockquote style={{
              margin: 0,
              fontFamily: "'Instrument Serif', serif",
              fontSize: 22, lineHeight: 1.3, fontStyle: 'italic',
              position: 'relative', paddingLeft: 18,
              borderLeft: `3px solid ${p.accent}`,
            }}>
              “{it.q}”
            </blockquote>
            <figcaption className="mono" style={{
              marginTop: 12, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
              color: 'var(--ink-soft)',
            }}>
              — {it.a}, {it.r}
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
};

const FinalCTA = ({ tweaks }) => {
  const p = getPalette(tweaks);
  return (
    <section style={{
      position: 'relative',
      background: p.sky,
      padding: '72px 28px 80px',
      textAlign: 'center',
      borderBottom: '2px solid var(--ink)',
      overflow: 'hidden',
    }}>
      {/* a few scattered doodles */}
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        <div style={{ position: 'absolute', left: '6%',  top: '30%' }}><Robot color="var(--ink)" size={56} rot={-8}/></div>
        <div style={{ position: 'absolute', right: '8%', top: '24%' }}><Crab color={p.accent} size={52} rot={10}/></div>
        <div style={{ position: 'absolute', left: '18%', bottom: '12%' }}><Sparkle color="oklch(0.78 0.14 85)" size={22}/></div>
        <div style={{ position: 'absolute', right: '20%', bottom: '18%' }}><Sparkle color="oklch(0.78 0.14 85)" size={18}/></div>
        <div style={{ position: 'absolute', left: '50%', top: '8%', transform: 'translateX(-50%) rotate(-6deg)' }}>
          <Block color="var(--ink)" fill={p.pop} size={130} label="SUBSCRIBE"/>
        </div>
      </div>

      <div style={{ position: 'relative', zIndex: 1, maxWidth: 720, margin: '0 auto' }}>
        <h2 style={{
          fontFamily: "'Instrument Serif', serif",
          fontSize: 'clamp(36px, 5vw, 56px)', fontWeight: 400, lineHeight: 1.05,
          margin: '0 0 16px', letterSpacing: '-0.01em',
        }}>
          Tuesdays are better with
          <br/>
          <em style={{ color: p.accentInk }}>a quiet, useful inbox.</em>
        </h2>
        <p style={{ margin: '0 auto 28px', maxWidth: 520, fontSize: 18, color: 'var(--ink)' }}>
          Join 14,208 builders reading AI Garage Weekly. One email, every Tuesday, five minutes.
        </p>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <SignupForm tweaks={tweaks}/>
        </div>
      </div>
    </section>
  );
};

const Footer = ({ tweaks }) => (
  <footer style={{
    background: 'var(--paper)',
    padding: '28px',
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    flexWrap: 'wrap', gap: 16,
  }}>
    <div className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>
      © 2026 AI Garage Weekly · Made by three builders in three time zones
    </div>
    <nav className="mono" style={{ display: 'flex', gap: 22, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase' }}>
      <a href="#" style={{ color: 'var(--ink)', textDecoration: 'none' }}>Archive</a>
      <a href="#" style={{ color: 'var(--ink)', textDecoration: 'none' }}>RSS</a>
      <a href="#" style={{ color: 'var(--ink)', textDecoration: 'none' }}>X / @aigarage</a>
      <a href="#" style={{ color: 'var(--ink)', textDecoration: 'none' }}>Farcaster</a>
      <a href="#" style={{ color: 'var(--ink)', textDecoration: 'none' }}>Contact</a>
    </nav>
  </footer>
);

Object.assign(window, { WhatsInside, IssuePreview, Quotes, FinalCTA, Footer });