// Variation A — Dark Studio (i18n)
// EN / PT-BR / ES via I18nProvider + useI18n from shared.jsx

function ContactForm({ T, FONT, MONO, t }) {
  const [selected, setSelected] = React.useState(new Set());
  const tags = [t('home.contact.i0'), t('home.contact.i1'), t('home.contact.i2'), t('home.contact.i3'), t('home.contact.i4')];

  const toggleTag = (tag) => setSelected(prev => {
    const next = new Set(prev);
    next.has(tag) ? next.delete(tag) : next.add(tag);
    return next;
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    const fd = new FormData(e.currentTarget);
    const name = fd.get('name') || '';
    const email = fd.get('email') || '';
    const co = fd.get('co') || '';
    const msg = fd.get('message') || '';
    const interests = selected.size ? `\nInterested in: ${[...selected].join(', ')}` : '';
    const subject = encodeURIComponent(`[KRTD] ${name}${co ? ` — ${co}` : ''}`);
    const body = encodeURIComponent(`Name: ${name}\nEmail: ${email}\nCompany: ${co}${interests}\n\n${msg}`);
    window.location.href = `mailto:hello@karteado.com?subject=${subject}&body=${body}`;
  };

  return (
    <form style={{ display: 'flex', flexDirection: 'column', gap: 16 }} onSubmit={handleSubmit}>
      {[
        { label: t('home.contact.name'), name: 'name' },
        { label: t('home.contact.email'), name: 'email' },
        { label: t('home.contact.co'), name: 'co' },
      ].map((f) => (
        <label key={f.name} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <span style={{ fontFamily: MONO, fontSize: 11, color: T.fgFaint, letterSpacing: '0.06em' }}>{f.label}</span>
          <input name={f.name} style={{
            background: 'transparent', border: 'none', borderBottom: `1px solid ${T.lineStrong}`,
            color: T.fg, fontSize: 17, fontFamily: FONT, padding: '8px 0', outline: 'none',
          }} />
        </label>
      ))}
      <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        <span style={{ fontFamily: MONO, fontSize: 11, color: T.fgFaint, letterSpacing: '0.06em' }}>{t('home.contact.message')}</span>
        <textarea name="message" rows={4} style={{
          background: 'transparent', border: 'none', borderBottom: `1px solid ${T.lineStrong}`,
          color: T.fg, fontSize: 17, fontFamily: FONT, padding: '8px 0', outline: 'none', resize: 'none',
        }} />
      </label>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 8 }}>
        <span style={{ fontFamily: MONO, fontSize: 11, color: T.fgFaint, letterSpacing: '0.06em', alignSelf: 'center', marginRight: 8 }}>{t('home.contact.interestedIn')}</span>
        {tags.map((tag) => {
          const on = selected.has(tag);
          return (
            <button type="button" key={tag} onClick={() => toggleTag(tag)} style={{
              fontFamily: FONT, fontSize: 13, padding: '6px 12px', borderRadius: 999, cursor: 'pointer',
              background: on ? T.fg : T.chip,
              color: on ? T.bg : T.fg,
              border: `1px solid ${on ? T.fg : T.line}`,
              transition: 'all .15s',
            }}>{tag}</button>
          );
        })}
      </div>
      <button type="submit" style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '12px 18px', borderRadius: 999, fontFamily: FONT, fontSize: 14, fontWeight: 500,
        background: T.fg, color: T.bg, border: `1px solid ${T.fg}`, cursor: 'pointer', alignSelf: 'flex-start',
      }}>{t('home.contact.send')} <IconArrow /></button>
    </form>
  );
}

function VariationA() {
  const { theme, toggle } = useTheme('dark');
  const { t, lang } = useI18n();
  const { isMobile } = useViewport();
  const [contentDoc, setContentDoc] = React.useState(() => (
    window.KRTD && window.KRTD.loadLocalHomeContent ? window.KRTD.loadLocalHomeContent() : null
  ));
  const content = window.KRTD && window.KRTD.getLocalizedHomeContent
    ? window.KRTD.getLocalizedHomeContent(contentDoc, lang)
    : null;
  const isDark = theme === 'dark';
  const M = isMobile ? {
    pad: 20, padY: 64,
    h1: 44, h2: 32, h2Small: 28, hero2: 22,
    body: 16, sub: 16, cards1: '1fr', cards2: '1fr', cards3: '1fr', cards4: '1fr 1fr',
    statSize: 22, navGap: 16, gapXL: 32,
  } : {
    pad: 64, padY: 120,
    h1: 96, h2: 56, h2Small: 44, hero2: 32,
    body: 20, sub: 18, cards1: '1fr', cards2: '1fr 1fr', cards3: 'repeat(3, 1fr)', cards4: 'repeat(4, 1fr)',
    statSize: 32, navGap: 32, gapXL: 80,
  };

  const T = isDark ? {
    bg: '#0a0a0a', bgAlt: '#111111',
    fg: '#f5f5f4', fgMute: 'rgba(245,245,244,.55)', fgFaint: 'rgba(245,245,244,.32)',
    line: 'rgba(255,255,255,.08)', lineStrong: 'rgba(255,255,255,.14)',
    chip: 'rgba(255,255,255,.06)', accent: 'oklch(0.72 0.12 35)',
  } : {
    bg: '#fafaf9', bgAlt: '#ffffff',
    fg: '#0c0c0c', fgMute: 'rgba(12,12,12,.62)', fgFaint: 'rgba(12,12,12,.4)',
    line: 'rgba(0,0,0,.08)', lineStrong: 'rgba(0,0,0,.16)',
    chip: 'rgba(0,0,0,.04)', accent: 'oklch(0.62 0.13 35)',
  };

  const FONT = "'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif";
  const MONO = "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace";
  const contentOr = (value, fallback) => value || fallback;
  const hero = content && content.hero ? content.hero : {};
  const about = content && content.about ? content.about : {};
  const heroBadge = contentOr(hero.badge, t('home.hero.badge'));
  const heroH1a = contentOr(hero.h1a, t('home.hero.h1a'));
  const heroH1bBefore = contentOr(hero.h1bBefore, t('home.hero.h1b.before'));
  const heroH1bAccent = contentOr(hero.h1bAccent, t('home.hero.h1b.accent'));
  const heroH1bAfter = contentOr(hero.h1bAfter, t('home.hero.h1b.after'));
  const heroSub = contentOr(hero.sub, t('home.hero.sub'));

  React.useEffect(() => {
    if (!window.KRTD || !window.KRTD.loadPublishedHomeContent) return;
    let cancelled = false;
    window.KRTD.loadPublishedHomeContent().then((published) => {
      if (!cancelled && published) setContentDoc(published);
    });
    return () => { cancelled = true; };
  }, []);

  const Eyebrow = ({ children, n }) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: MONO, fontSize: 11, color: T.fgMute, letterSpacing: '0.06em' }}>
      {n && <span style={{ color: T.accent }}>{n}</span>}
      <span style={{ textTransform: 'uppercase' }}>{children}</span>
      <span style={{ flex: 1, height: 1, background: T.line, marginLeft: 8 }} />
    </div>
  );

  const Btn = ({ children, primary, href = '#', sm }) => (
    <a href={href} style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: sm ? '8px 14px' : '12px 18px', borderRadius: 999,
      fontFamily: FONT, fontSize: sm ? 13 : 14, fontWeight: 500,
      textDecoration: 'none',
      background: primary ? T.fg : 'transparent',
      color: primary ? T.bg : T.fg,
      border: `1px solid ${primary ? T.fg : T.lineStrong}`,
      transition: 'all .2s',
    }}
    onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; }}
    onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}>
      {children}
    </a>
  );

  const defaultStats = [
    [t('home.stats.0.k'), t('home.stats.0.v'), t('home.stats.0.sub')],
    [t('home.stats.1.k'), t('home.stats.1.v'), t('home.stats.1.sub')],
    [t('home.stats.2.k'), t('home.stats.2.v'), t('home.stats.2.sub')],
    [t('home.stats.3.k'), t('home.stats.3.v'), t('home.stats.3.sub')],
  ];
  const stats = content && Array.isArray(content.stats) && content.stats.length
    ? content.stats.map((s) => [s.label, s.value, s.sub])
    : defaultStats;

  const services = [
    { n: t('home.services.0.n'), title: t('home.services.0.title'), blurb: t('home.services.0.blurb'),
      items: [t('home.services.0.i0'), t('home.services.0.i1'), t('home.services.0.i2'), t('home.services.0.i3')] },
    { n: t('home.services.1.n'), title: t('home.services.1.title'), blurb: t('home.services.1.blurb'),
      items: [t('home.services.1.i0'), t('home.services.1.i1'), t('home.services.1.i2'), t('home.services.1.i3')] },
    { n: t('home.services.2.n'), title: t('home.services.2.title'), blurb: t('home.services.2.blurb'),
      items: [t('home.services.2.i0'), t('home.services.2.i1'), t('home.services.2.i2'), t('home.services.2.i3')] },
  ];

  const defaultWorkItems = [
    { year: '2025', client: 'Internal — Readaily', what: 'Reading habit app v2', tags: ['Product', 'iOS'] },
  ];
  const workItems = content && Array.isArray(content.projects) && content.projects.length
    ? content.projects
    : defaultWorkItems;

  const defaultPosts = [
    { date: 'Apr 2026', title: 'Designing for the AI fog — when the model fails, what does your UI do?', mins: '8 min' },
    { date: 'Mar 2026', title: 'Readaily v2: shipping a habit, not a feature.', mins: '12 min' },
    { date: 'Feb 2026', title: 'The case for staying small in 2026.', mins: '5 min' },
  ];
  const posts = content && Array.isArray(content.posts) && content.posts.length
    ? content.posts.slice(0, 3)
    : defaultPosts;

  return (
    <div style={{
      width: '100%', maxWidth: 1440, minHeight: isMobile ? 'auto' : 3400, background: T.bg, color: T.fg,
      fontFamily: FONT, position: 'relative', overflow: 'hidden',
    }}>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" />
      <ResponsiveStyles />

      {/* ─── NAV ─────────────────────────────────────────────── */}
      {isMobile ? (
        <MobileNav
          T={T} MONO={MONO} isDark={isDark} toggle={toggle}
          currentLogoHref="index.html"
          links={[
            { href: 'apps/index.html', label: t('nav.apps') },
            { href: 'services/index.html', label: t('nav.services') },
            { href: '#work', label: t('nav.work') },
            { href: 'writing/index.html', label: t('nav.writing') },
            { href: '#about', label: t('nav.about') },
          ]}
          ctaHref="#contact" ctaLabel={t('nav.startProject')}
        />
      ) : (
        <nav style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '24px 64px', borderBottom: `1px solid ${T.line}`,
        }}>
          <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', color: 'inherit' }}>
            <KrtdLogo height={20} dark={isDark} />
            <span style={{ fontFamily: MONO, fontSize: 11, color: T.fgFaint, marginLeft: 4 }}>{t('nav.studio')}</span>
          </a>
          <div style={{ display: 'flex', alignItems: 'center', gap: 32, fontSize: 14, color: T.fgMute }}>
            <a href="apps/index.html" style={{ color: 'inherit', textDecoration: 'none' }}>{t('nav.apps')}</a>
            <a href="services/index.html" style={{ color: 'inherit', textDecoration: 'none' }}>{t('nav.services')}</a>
            <a href="#work" style={{ color: 'inherit', textDecoration: 'none' }}>{t('nav.work')}</a>
            <a href="writing/index.html" style={{ color: 'inherit', textDecoration: 'none' }}>{t('nav.writing')}</a>
            <a href="#about" style={{ color: 'inherit', textDecoration: 'none' }}>{t('nav.about')}</a>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <LangSelector T={T} />
            <button onClick={toggle} aria-label="Toggle theme" style={{
              width: 32, height: 32, borderRadius: 999, border: `1px solid ${T.lineStrong}`,
              background: 'transparent', color: T.fg, cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              {isDark ? <IconSun /> : <IconMoon />}
            </button>
            <Btn primary sm href="#contact">{t('nav.startProject')}</Btn>
          </div>
        </nav>
      )}

      {/* ─── HERO ────────────────────────────────────────────── */}
      <section style={{ padding: '120px 64px 80px', position: 'relative' }}>
        <div style={{
          position: 'absolute', inset: 0, opacity: isDark ? 0.4 : 0.6,
          backgroundImage: `linear-gradient(${T.line} 1px, transparent 1px), linear-gradient(90deg, ${T.line} 1px, transparent 1px)`,
          backgroundSize: '64px 64px',
          maskImage: 'radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent)',
          WebkitMaskImage: 'radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent)',
          pointerEvents: 'none',
        }} />

        <div style={{ position: 'relative', maxWidth: 1100 }}>
          <Reveal>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: MONO, fontSize: 12, color: T.fgMute, marginBottom: 32 }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: T.accent, boxShadow: `0 0 12px ${T.accent}` }} />
              <span>{heroBadge}</span>
            </div>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{
              fontFamily: FONT, fontSize: 96, lineHeight: 0.98, letterSpacing: '-0.04em',
              fontWeight: 500, margin: 0, maxWidth: 1100, textWrap: 'pretty',
            }}>
              {heroH1a}
              <br />
              {heroH1bBefore}<em style={{ fontStyle: 'italic', color: T.accent, fontWeight: 400 }}>{heroH1bAccent}</em>{heroH1bAfter}
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p style={{
              fontSize: 20, lineHeight: 1.5, color: T.fgMute, maxWidth: 640,
              marginTop: 32, marginBottom: 0, fontWeight: 400,
            }}>
              {heroSub.split('Readaily').map((part, i, arr) => (
                i < arr.length - 1
                  ? <React.Fragment key={i}>{part}<span style={{ color: T.fg }}>Readaily</span></React.Fragment>
                  : <React.Fragment key={i}>{part}</React.Fragment>
              ))}
            </p>
          </Reveal>
          <Reveal delay={240}>
            <div style={{ display: 'flex', gap: 12, marginTop: 40 }}>
              <Btn primary href="apps/index.html">{t('home.hero.cta1')} <IconArrow /></Btn>
              <Btn href="services/index.html">{t('home.hero.cta2')}</Btn>
            </div>
          </Reveal>
        </div>

        <Reveal delay={320}>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
            marginTop: 96, paddingTop: 24, borderTop: `1px solid ${T.line}`,
          }}>
            {stats.map(([k, v, sub], i) => (
              <div key={i} style={{ padding: '4px 24px 4px 0', borderRight: i < 3 ? `1px solid ${T.line}` : 'none' }}>
                <div style={{ fontFamily: MONO, fontSize: 11, color: T.fgFaint, letterSpacing: '0.06em' }}>{k}</div>
                <div style={{ fontSize: 32, marginTop: 6, letterSpacing: '-0.02em', fontWeight: 500 }}>{v}</div>
                <div style={{ fontSize: 13, color: T.fgMute, marginTop: 4 }}>{sub}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </section>

      {/* ─── APPS PORTFOLIO ──────────────────────────────────── */}
      <section id="apps" style={{ padding: '120px 64px', borderTop: `1px solid ${T.line}` }}>
        <Eyebrow n="01">{t('home.apps.eyebrow')}</Eyebrow>
        <Reveal>
          <h2 style={{ fontSize: 56, fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.02, marginTop: 24, marginBottom: 8, maxWidth: 900 }}>
            {t('home.apps.h2a')}<br />
            <span style={{ color: T.fgMute }}>{t('home.apps.h2b')}</span>
          </h2>
          <p style={{ color: T.fgMute, fontSize: 18, maxWidth: 620, lineHeight: 1.55, margin: 0 }}>
            {t('home.apps.sub')}
          </p>
        </Reveal>

        <Reveal delay={120}>
          <a href="apps/readaily.html" style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
            <div style={{
              marginTop: 48, borderRadius: 24, border: `1px solid ${T.line}`,
              background: T.bgAlt, padding: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40,
              transition: 'border-color .25s, transform .25s',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = T.lineStrong; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = T.line; }}>
              <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                    <div style={{ width: 56, height: 56, borderRadius: 14, overflow: 'hidden', flexShrink: 0, background: '#f5f1ea', boxShadow: '0 6px 24px rgba(0,0,0,.25)' }}>
                      <img src="https://readaily.app/assets/readaily_icon.png" alt="Readaily" style={{ width: '100%', height: '100%', display: 'block' }} />
                    </div>
                    <div>
                      <div style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.01em' }}>Readaily</div>
                      <div style={{ fontFamily: MONO, fontSize: 11, color: T.fgFaint, letterSpacing: '0.06em', marginTop: 2 }}>{t('home.readaily.tag')}</div>
                    </div>
                  </div>
                  <p style={{ fontSize: 26, lineHeight: 1.3, marginTop: 32, marginBottom: 0, letterSpacing: '-0.01em', maxWidth: 500, textWrap: 'pretty', fontWeight: 400 }}>
                    {t('home.readaily.headline').split('gently kept.').length > 1
                      ? <>{t('home.readaily.headline').split(/(gently kept\.|mantido com leveza\.|mantenido con suavidad\.)/)[0]}<em style={{ fontStyle: 'italic', color: T.accent }}>{t('home.readaily.headline').match(/gently kept\.|mantido com leveza\.|mantenido con suavidad\./)?.[0]}</em></>
                      : t('home.readaily.headline')
                    }
                  </p>
                  <p style={{ fontSize: 16, lineHeight: 1.55, color: T.fgMute, margin: '16px 0 0', maxWidth: 480 }}>
                    {t('home.readaily.sub')}
                  </p>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 28, marginTop: 32 }}>
                  <div>
                    <div style={{ fontFamily: MONO, fontSize: 10, color: T.fgFaint, letterSpacing: '0.06em' }}>{t('home.readaily.platforms')}</div>
                    <div style={{ fontSize: 18, marginTop: 4, fontWeight: 500 }}>iOS · Android</div>
                  </div>
                  <div>
                    <div style={{ fontFamily: MONO, fontSize: 10, color: T.fgFaint, letterSpacing: '0.06em' }}>{t('home.readaily.languages')}</div>
                    <div style={{ fontSize: 18, marginTop: 4, fontWeight: 500 }}>8</div>
                  </div>
                  <div>
                    <div style={{ fontFamily: MONO, fontSize: 10, color: T.fgFaint, letterSpacing: '0.06em' }}>{t('home.readaily.price')}</div>
                    <div style={{ fontSize: 18, marginTop: 4, fontWeight: 500 }}>{t('home.readaily.priceval')}</div>
                  </div>
                  <div style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 14, color: T.fg }}>
                    {t('home.readaily.visit')} <IconArrowUpRight />
                  </div>
                </div>
              </div>
              <div style={{ borderRadius: 16, background: '#f5f1ea', height: 256, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 64 }}>
                <img src="assets/readaily_logo_wordmark.png" alt="Readaily" style={{ width: '100%', height: 'auto', objectFit: 'contain' }} />
              </div>
            </div>
          </a>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 24 }}>
          {[
            { name: t('home.workshop.0.name'), tag: t('home.workshop.0.tag'), blurb: t('home.workshop.0.blurb'), icon: '○' },
            { name: t('home.workshop.1.name'), tag: t('home.workshop.1.tag'), blurb: t('home.workshop.1.blurb'), icon: '→' },
          ].map((a, i) => (
            <Reveal key={i} delay={200 + i * 80}>
              <a href="#contact" style={{ display: 'block', textDecoration: 'none', color: 'inherit' }}>
                <div style={{
                  borderRadius: 20, border: `1px dashed ${T.line}`, background: T.bgAlt,
                  padding: 28, display: 'flex', gap: 24, alignItems: 'center',
                  transition: 'border-color .25s',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = T.lineStrong; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = T.line; }}>
                  <div style={{ width: 64, height: 64, borderRadius: 14, background: 'transparent', border: `1px dashed ${T.lineStrong}`, flex: '0 0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center', color: T.fgFaint, fontSize: 24 }}>
                    {a.icon}
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: MONO, fontSize: 10, color: T.fgFaint, letterSpacing: '0.06em' }}>{a.tag}</div>
                    <div style={{ fontSize: 18, fontWeight: 500, letterSpacing: '-0.01em', marginTop: 4 }}>{a.name}</div>
                    <div style={{ fontSize: 14, color: T.fgMute, marginTop: 6 }}>{a.blurb}</div>
                  </div>
                  <IconArrowUpRight size={18} style={{ color: T.fgFaint }} />
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ─── SERVICES ────────────────────────────────────────── */}
      <section id="services" style={{ padding: '120px 64px', borderTop: `1px solid ${T.line}` }}>
        <Eyebrow n="02">{t('home.services.eyebrow')}</Eyebrow>
        <Reveal>
          <h2 style={{ fontSize: 56, fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.02, marginTop: 24, marginBottom: 64, maxWidth: 900 }}>
            {t('home.services.h2')}
          </h2>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {services.map((s, i) => (
            <Reveal key={i} delay={i * 100}>
              <a href="services/index.html" style={{ textDecoration: 'none', color: 'inherit', display: 'block', height: '100%' }}>
                <div style={{
                  borderRadius: 20, border: `1px solid ${T.line}`, background: T.bgAlt,
                  padding: 32, height: '100%', display: 'flex', flexDirection: 'column',
                  transition: 'transform .25s, border-color .25s',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = T.lineStrong; e.currentTarget.style.transform = 'translateY(-2px)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = T.line; e.currentTarget.style.transform = 'translateY(0)'; }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <div style={{ fontFamily: MONO, fontSize: 11, color: T.accent, letterSpacing: '0.08em' }}>{s.n}</div>
                    <IconArrowUpRight size={16} style={{ color: T.fgFaint }} />
                  </div>
                  <h3 style={{ fontSize: 26, fontWeight: 500, letterSpacing: '-0.02em', margin: '24px 0 12px' }}>{s.title}</h3>
                  <p style={{ fontSize: 15, color: T.fgMute, lineHeight: 1.55, margin: 0 }}>{s.blurb}</p>
                  <div style={{ height: 1, background: T.line, margin: '24px 0' }} />
                  <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                    {s.items.map((it, j) => (
                      <li key={j} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: T.fg }}>
                        <span style={{ width: 4, height: 4, borderRadius: 999, background: T.accent }} />
                        {it}
                      </li>
                    ))}
                  </ul>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ─── WORK ────────────────────────────────────────────── */}
      <section id="work" style={{ padding: '120px 64px', borderTop: `1px solid ${T.line}` }}>
        <Eyebrow n="03">{t('home.work.eyebrow')}</Eyebrow>
        <Reveal>
          <h2 style={{ fontSize: 56, fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.02, marginTop: 24, marginBottom: 48, maxWidth: 900 }}>
            {t('home.work.h2')}
          </h2>
        </Reveal>
        <Reveal delay={120}>
          <div style={{ borderTop: `1px solid ${T.line}` }}>
            {workItems.map((w, i) => (
              <a key={i} href={w.url || '#'} style={{
                display: 'grid', gridTemplateColumns: '80px 1fr 1fr auto auto',
                gap: 24, alignItems: 'center', padding: '24px 0',
                borderBottom: `1px solid ${T.line}`, color: 'inherit', textDecoration: 'none',
                transition: 'padding-left .25s',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.paddingLeft = '16px'; }}
              onMouseLeave={(e) => { e.currentTarget.style.paddingLeft = '0'; }}>
                <div style={{ fontFamily: MONO, fontSize: 12, color: T.fgFaint }}>{w.year}</div>
                <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.01em' }}>{w.client}</div>
                <div style={{ fontSize: 15, color: T.fgMute }}>{w.what}</div>
                <div style={{ display: 'flex', gap: 6 }}>
                  {(w.tags || []).map((tag) => (
                    <span key={tag} style={{
                      fontFamily: MONO, fontSize: 10, padding: '4px 8px', borderRadius: 999,
                      background: T.chip, color: T.fgMute, letterSpacing: '0.06em',
                    }}>{tag}</span>
                  ))}
                </div>
                <IconArrowUpRight size={16} style={{ color: T.fgFaint }} />
              </a>
            ))}
          </div>
        </Reveal>
      </section>

      {/* ─── ABOUT ───────────────────────────────────────────── */}
      <section id="about" style={{ padding: '120px 64px', borderTop: `1px solid ${T.line}`, background: isDark ? '#070707' : '#f5f4f1' }}>
        <Eyebrow n="04">{t('home.about.eyebrow')}</Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, marginTop: 24, alignItems: 'start' }}>
          <Reveal>
            <h2 style={{ fontSize: 56, fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.04, margin: 0, maxWidth: 600 }}>
              {contentOr(about.headline, t('home.about.h2'))}
            </h2>
            <p style={{ fontSize: 18, color: T.fgMute, lineHeight: 1.55, maxWidth: 540, marginTop: 24 }}>
              {contentOr(about.body, t('home.about.sub'))}
            </p>
            <div style={{ display: 'flex', gap: 24, marginTop: 40 }}>
              <Btn primary href="#contact">{t('home.about.cta1')} <IconArrow /></Btn>
              <Btn href="#work">{t('home.about.cta2')}</Btn>
            </div>
          </Reveal>

          <Reveal delay={120}>
            <div style={{
              borderRadius: 20, border: `1px solid ${T.line}`, background: T.bg,
              padding: 28, display: 'flex', flexDirection: 'column', gap: 20,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <img src="https://media.licdn.com/dms/image/v2/D4D03AQGEpRQC-Ry6kg/profile-displayphoto-scale_400_400/B4DZsIcFUsLEAg-/0/1765373139083?e=1780531200&v=beta&t=ve9XsD0jVJeRuARf6-TPRZRrcMm4AxvFDd_Ea2Ad6C8" alt="Rafa Penteado" style={{ width: 72, height: 72, borderRadius: 999, objectFit: 'cover', display: 'block', flexShrink: 0 }} />
                <div>
                  <div style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.01em' }}>Rafa Penteado</div>
                  <div style={{ fontFamily: MONO, fontSize: 11, color: T.accent, letterSpacing: '0.08em', marginTop: 4 }}>{contentOr(about.founderRole, t('home.founder.role'))}</div>
                </div>
              </div>
              <p style={{ fontSize: 15, color: T.fgMute, lineHeight: 1.6, margin: 0 }}>
                {contentOr(about.founderBio, t('home.founder.bio'))}
              </p>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                {['iOS', 'React', 'AI/ML', 'Product design', 'Strategy'].map((tag) => (
                  <span key={tag} style={{ fontFamily: MONO, fontSize: 11, padding: '5px 10px', borderRadius: 999, background: T.chip, color: T.fgMute }}>{tag}</span>
                ))}
              </div>
              <a href="https://www.linkedin.com/in/rafapenteado" target="_blank" rel="noreferrer" style={{
                display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 14,
                color: T.fg, textDecoration: 'none', borderTop: `1px solid ${T.line}`, paddingTop: 16,
              }}>
                {t('home.founder.linkedin')} <IconArrowUpRight />
              </a>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ─── WRITING ─────────────────────────────────────────── */}
      <section id="writing" style={{ padding: '120px 64px', borderTop: `1px solid ${T.line}` }}>
        <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between' }}>
          <div>
            <Eyebrow n="05">{t('home.writing.eyebrow')}</Eyebrow>
            <Reveal>
              <h2 style={{ fontSize: 56, fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.02, marginTop: 24, marginBottom: 0, maxWidth: 700 }}>
                {t('home.writing.h2')}
              </h2>
            </Reveal>
          </div>
          <a href="writing/index.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 14, color: T.fg, textDecoration: 'none' }}>
            {t('home.writing.all')} <IconArrow />
          </a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 56 }}>
          {posts.map((p, i) => (
            <Reveal key={i} delay={i * 80}>
              <a href={p.url || 'writing/index.html'} style={{ display: 'block', color: 'inherit', textDecoration: 'none' }}>
                <Placeholder label={`Cover · ${p.title.split(' ').slice(0, 3).join(' ')}…`} h={200} radius={14} theme={theme} accent={T.accent} />
                <div style={{ fontFamily: MONO, fontSize: 11, color: T.fgFaint, letterSpacing: '0.06em', marginTop: 20 }}>
                  {p.date} · {p.mins}
                </div>
                <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.01em', marginTop: 8, lineHeight: 1.3, textWrap: 'balance' }}>
                  {p.title}
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ─── CONTACT ─────────────────────────────────────────── */}
      <section id="contact" style={{ padding: '120px 64px', borderTop: `1px solid ${T.line}`, background: isDark ? '#070707' : '#f5f4f1' }}>
        <Eyebrow n="06">{t('home.contact.eyebrow')}</Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, marginTop: 24, alignItems: 'start' }}>
          <Reveal>
            <h2 style={{ fontSize: 64, fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.02, margin: 0 }}>
              {t('home.contact.h2a')}<br />
              <em style={{ fontStyle: 'italic', color: T.accent, fontWeight: 400 }}>{t('home.contact.h2b')}</em>
            </h2>
            <p style={{ fontSize: 18, color: T.fgMute, lineHeight: 1.55, maxWidth: 480, marginTop: 24 }}>
              {t('home.contact.sub')}
            </p>
            <div style={{ marginTop: 40, fontFamily: MONO, fontSize: 13, color: T.fgMute, lineHeight: 1.8 }}>
              <div>hello@karteado.com</div>
              <div>{t('home.contact.hours')}</div>
            </div>
          </Reveal>

          <Reveal delay={120}>
            <ContactForm T={T} FONT={FONT} MONO={MONO} t={t} />
          </Reveal>
        </div>
      </section>

      {/* ─── FOOTER ──────────────────────────────────────────── */}
      <footer style={{ padding: '64px 64px 32px', borderTop: `1px solid ${T.line}` }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', gap: 32 }}>
          <div>
            <KrtdLogo height={28} dark={isDark} />
            <div style={{ fontFamily: MONO, fontSize: 11, color: T.fgFaint, letterSpacing: '0.06em', marginTop: 12, maxWidth: 280, lineHeight: 1.6 }}>
              {t('home.footer.tagline')}
            </div>
          </div>
          <div style={{ display: 'flex', gap: 64, fontSize: 14 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div style={{ fontFamily: MONO, fontSize: 10, color: T.fgFaint, letterSpacing: '0.08em', marginBottom: 4 }}>{t('home.footer.studio')}</div>
              <a href="#about" style={{ color: T.fgMute, textDecoration: 'none' }}>{t('home.footer.about')}</a>
              <a href="services/index.html" style={{ color: T.fgMute, textDecoration: 'none' }}>{t('home.footer.services')}</a>
              <a href="writing/index.html" style={{ color: T.fgMute, textDecoration: 'none' }}>{t('home.footer.writing')}</a>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div style={{ fontFamily: MONO, fontSize: 10, color: T.fgFaint, letterSpacing: '0.08em', marginBottom: 4 }}>{t('home.footer.apps')}</div>
              <a href="apps/readaily.html" style={{ color: T.fgMute, textDecoration: 'none' }}>Readaily</a>
              <a href="apps/index.html" style={{ color: T.fgMute, textDecoration: 'none' }}>{t('home.footer.about').includes('About') ? 'All apps' : t('rd.footer.allApps')}</a>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div style={{ fontFamily: MONO, fontSize: 10, color: T.fgFaint, letterSpacing: '0.08em', marginBottom: 4 }}>{t('home.footer.elsewhere')}</div>
              <a href="https://www.linkedin.com/company/krtd/" target="_blank" rel="noreferrer" style={{ color: T.fgMute, textDecoration: 'none' }}>LinkedIn</a>
              <a href="mailto:hello@karteado.com" style={{ color: T.fgMute, textDecoration: 'none' }}>{t('home.footer.email')}</a>
            </div>
          </div>
        </div>
        <div style={{ marginTop: 48, paddingTop: 24, borderTop: `1px solid ${T.line}`, display: 'flex', justifyContent: 'space-between', fontFamily: MONO, fontSize: 11, color: T.fgFaint, letterSpacing: '0.06em' }}>
          <span>{t('home.footer.copyright')}</span>
          <span>{t('home.footer.made')}</span>
        </div>
      </footer>
    </div>
  );
}

window.VariationA = VariationA;