// Landing Page Customizer — split view with live preview, wired to backend
const { useState: useState_lp, useEffect: useEffect_lp, useRef: useRef_lp } = React;

function LandingCustomizer() {
  const [config, setConfig] = useState_lp({
    template: 'hero',
    logo: 'KK',
    logoUrl: null,
    brand: 'Kopi Kenanga',
    headline: 'Bantu kami jadi kopi favoritmu di Surabaya',
    subhead: 'Isi survei singkat (2 menit) dan dapatkan voucher Rp 10.000 langsung ke WhatsApp kamu.',
    color: 'var(--primary)',
    bg: 'gradient',
    bgImage: null,
    cta: 'Mulai Survei',
  });

  const update = (key, val) => setConfig((c) => ({ ...c, [key]: val }));

  // Backend wiring
  const [campaigns, setCampaigns] = useState_lp([]);
  const [campaignId, setCampaignId] = useState_lp(null);
  const [savedAt, setSavedAt] = useState_lp(null);
  const [saving, setSaving] = useState_lp(false);
  const [error, setError] = useState_lp(null);
  const [uploadingLogo, setUploadingLogo] = useState_lp(false);
  const [uploadingBg, setUploadingBg] = useState_lp(false);
  const logoInputRef = useRef_lp(null);
  const bgInputRef = useRef_lp(null);

  useEffect_lp(() => {
    window.api
      .listCampaigns()
      .then((r) => {
        const list = r.campaigns || [];
        setCampaigns(list);
        const active = list.find((c) => c.status === 'active') || list[0];
        if (active) setCampaignId(active.id);
      })
      .catch(() => {});
  }, []);

  // Pull existing landing config when a campaign is picked
  useEffect_lp(() => {
    if (!campaignId) return;
    window.api
      .getCampaign(campaignId)
      .then((r) => {
        const camp = r.campaign;
        const ld = r.landing;
        if (!ld) return;
        setConfig((c) => ({
          ...c,
          template: ld.templateId || c.template,
          headline: ld.heroText || c.headline,
          color: ld.themeColor || c.color,
          logoUrl: ld.logoUrl || null,
          bgImage: ld.backgroundImage || null,
          brand: camp?.title?.replace(/^Brand Awareness\s+/i, '') || c.brand,
          ...((ld.customStyles || {})),
        }));
      })
      .catch(() => {});
  }, [campaignId]);

  const handleUpload = async (file, target) => {
    if (!file) return;
    if (target === 'logo') setUploadingLogo(true);
    else setUploadingBg(true);
    setError(null);
    try {
      const r = await window.api.upload(file);
      if (target === 'logo') update('logoUrl', r.url);
      else { update('bgImage', r.url); update('bg', 'image'); }
    } catch (err) {
      setError(err.message || 'Upload gagal');
    } finally {
      setUploadingLogo(false);
      setUploadingBg(false);
    }
  };

  const handleSave = async () => {
    if (!campaignId) {
      setError('Pilih campaign terlebih dahulu');
      return;
    }
    setSaving(true);
    setError(null);
    try {
      await window.api.putLanding(campaignId, {
        templateId: config.template,
        logoUrl: config.logoUrl,
        heroText: config.headline,
        themeColor: config.color,
        backgroundImage: config.bgImage,
        customStyles: {
          subhead: config.subhead,
          cta: config.cta,
          logo: config.logo,
          bg: config.bg,
        },
      });
      setSavedAt(new Date());
    } catch (err) {
      setError(err.message || 'Gagal menyimpan landing config');
    } finally {
      setSaving(false);
    }
  };

  const palette = [
    'var(--primary)', // indigo
    'oklch(0.62 0.16 25)',  // coral
    'oklch(0.58 0.14 145)', // green
    'oklch(0.68 0.16 75)',  // amber
    'oklch(0.55 0.18 320)', // magenta
    'oklch(0.30 0.04 265)', // dark
  ];

  const templates = [
    { id: 'hero',    label: 'Hero',     desc: 'Gambar besar di atas' },
    { id: 'split',   label: 'Split',    desc: 'Teks kiri, gambar kanan' },
    { id: 'minimal', label: 'Minimal',  desc: 'Center, fokus pada CTA' },
  ];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
      <TopBar
        title="Landing Page Kuesioner"
        subtitle={
          campaignId
            ? `Edit halaman pembuka untuk "${campaigns.find((c) => c.id === campaignId)?.title || 'campaign'}"`
            : 'Halaman pembuka yang dilihat responden sebelum mengisi survei'
        }
        right={
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            {campaigns.length > 0 && (
              <select
                className="select"
                value={campaignId || ''}
                onChange={(e) => setCampaignId(e.target.value)}
                style={{ padding: '6px 10px', fontSize: 12.5, minWidth: 200 }}
              >
                {campaigns.map((c) => (
                  <option key={c.id} value={c.id}>{c.title}</option>
                ))}
              </select>
            )}
            {campaignId && (() => {
              const c = campaigns.find((x) => x.id === campaignId);
              return c?.publicSlug ? (
                <a className="btn btn-ghost" href={`/survey/${c.publicSlug}`} target="_blank" rel="noopener">
                  <I.Eye size={14} />Pratinjau
                </a>
              ) : null;
            })()}
            <button className="btn btn-primary" onClick={handleSave} disabled={saving} style={{ opacity: saving ? 0.7 : 1 }}>
              <I.Check size={14} />{saving ? 'Menyimpan…' : 'Simpan'}
            </button>
            {savedAt && (
              <span style={{ fontSize: 11.5, color: 'oklch(0.42 0.12 155)' }}>
                ✓ {savedAt.toLocaleTimeString('id-ID')}
              </span>
            )}
          </div>
        }
      />

      {error && (
        <div style={{ padding: '8px 18px', background: 'var(--danger-soft)', color: 'var(--danger)', fontSize: 12.5 }}>
          {error}
        </div>
      )}

      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '320px 1fr', overflow: 'hidden' }}>
        {/* Left: editor */}
        <div className="scroll" style={{ overflow: 'auto', borderRight: '1px solid var(--line)', background: 'var(--surface)', padding: 20 }}>
          <Section title="Galeri Starter">
            <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginBottom: 10, lineHeight: 1.5 }}>
              Klik salah satu template — copy & warna langsung ke-set, tinggal ganti detail brand.
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              {(window.LANDING_TEMPLATES || []).map((tpl) => {
                // Apply = overwrite layout + color + bg + copy. Brand & logo stay.
                const apply = () => setConfig((c) => ({ ...c, ...tpl.config }));
                return (
                  <button key={tpl.id} onClick={apply} style={{
                    padding: 0, textAlign: 'left',
                    background: 'var(--surface)',
                    border: '1px solid var(--line)',
                    borderRadius: 10, overflow: 'hidden', cursor: 'pointer',
                    transition: 'all 140ms',
                  }}
                    onMouseEnter={(e) => e.currentTarget.style.boxShadow = 'var(--shadow-md)'}
                    onMouseLeave={(e) => e.currentTarget.style.boxShadow = 'none'}
                  >
                    {/* Mini preview swatch */}
                    <div style={{
                      height: 60,
                      background: `linear-gradient(135deg, ${tpl.config.color}, oklch(0.42 0.20 290))`,
                      position: 'relative', overflow: 'hidden',
                    }}>
                      <div style={{
                        position: 'absolute', bottom: 6, left: 6, right: 6,
                        height: 14, borderRadius: 4, background: 'rgba(255,255,255,0.85)',
                      }} />
                      <div style={{
                        position: 'absolute', top: 8, left: 6,
                        width: 18, height: 18, borderRadius: 4, background: 'rgba(255,255,255,0.7)',
                      }} />
                    </div>
                    <div style={{ padding: '8px 10px' }}>
                      <div style={{ fontSize: 11.5, fontWeight: 600, lineHeight: 1.2 }}>{tpl.name}</div>
                      <div style={{ fontSize: 10, color: 'var(--ink-3)', marginTop: 2 }}>{tpl.category}</div>
                    </div>
                  </button>
                );
              })}
            </div>
          </Section>

          <Section title="Layout">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {templates.map((t) => (
                <button key={t.id} onClick={() => update('template', t.id)} style={{
                  display: 'flex', alignItems: 'center', gap: 10, padding: 10, textAlign: 'left',
                  background: config.template === t.id ? 'var(--primary-50)' : 'var(--surface)',
                  border: config.template === t.id ? '1.5px solid var(--primary)' : '1px solid var(--line)',
                  borderRadius: 10, cursor: 'pointer',
                }}>
                  <TemplateThumb id={t.id} color={config.color} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{t.label}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{t.desc}</div>
                  </div>
                  {config.template === t.id && <I.Check size={14} style={{ color: 'var(--primary)' }} />}
                </button>
              ))}
            </div>
          </Section>

          <Section title="Brand">
            <label className="label">Logo (inisial)</label>
            <input className="input" value={config.logo} onChange={(e) => update('logo', e.target.value.slice(0, 3))} maxLength={3} />

            <input
              ref={logoInputRef}
              type="file"
              accept="image/*"
              style={{ display: 'none' }}
              onChange={(e) => handleUpload(e.target.files?.[0], 'logo')}
            />
            <button
              className="btn btn-ghost"
              style={{ width: '100%', marginTop: 8, justifyContent: 'center' }}
              onClick={() => logoInputRef.current?.click()}
              disabled={uploadingLogo}
            >
              <I.Image size={14} />{uploadingLogo ? 'Mengunggah…' : config.logoUrl ? 'Ganti Logo' : 'Unggah Logo'}
            </button>
            {config.logoUrl && (
              <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', gap: 8, padding: 6, background: 'var(--bg-2)', borderRadius: 8 }}>
                <img src={config.logoUrl} alt="logo" style={{ width: 28, height: 28, objectFit: 'cover', borderRadius: 6 }} />
                <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }}>
                  {config.logoUrl}
                </span>
                <button onClick={() => update('logoUrl', null)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--ink-3)' }}>
                  <I.X size={12} />
                </button>
              </div>
            )}

            <label className="label" style={{ marginTop: 14 }}>Nama brand</label>
            <input className="input" value={config.brand} onChange={(e) => update('brand', e.target.value)} />
          </Section>

          <Section title="Konten">
            <label className="label">Headline</label>
            <textarea className="textarea" rows="2" value={config.headline} onChange={(e) => update('headline', e.target.value)} />
            <label className="label" style={{ marginTop: 10 }}>Subjudul</label>
            <textarea className="textarea" rows="3" value={config.subhead} onChange={(e) => update('subhead', e.target.value)} />
            <label className="label" style={{ marginTop: 10 }}>Tombol CTA</label>
            <input className="input" value={config.cta} onChange={(e) => update('cta', e.target.value)} />
          </Section>

          <Section title="Warna Tema">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 6 }}>
              {palette.map((p) => (
                <button key={p} onClick={() => update('color', p)} style={{
                  height: 32, borderRadius: 8, border: 'none', cursor: 'pointer',
                  background: p,
                  boxShadow: config.color === p ? `0 0 0 2px white, 0 0 0 4px ${p}` : 'none',
                  transition: 'box-shadow 140ms',
                }} aria-label={p} />
              ))}
            </div>
          </Section>

          <Section title="Background">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
              {[
                { id: 'gradient', label: 'Gradient' },
                { id: 'image',    label: 'Gambar'   },
                { id: 'solid',    label: 'Solid'    },
              ].map((b) => (
                <button key={b.id} onClick={() => update('bg', b.id)} style={{
                  padding: '8px 6px', fontSize: 12,
                  background: config.bg === b.id ? 'var(--primary-50)' : 'var(--surface)',
                  border: config.bg === b.id ? '1.5px solid var(--primary)' : '1px solid var(--line)',
                  color: config.bg === b.id ? 'var(--primary)' : 'var(--ink-2)',
                  borderRadius: 8, cursor: 'pointer', fontWeight: 500,
                }}>{b.label}</button>
              ))}
            </div>
            {config.bg === 'image' && (
              <>
                <input
                  ref={bgInputRef}
                  type="file"
                  accept="image/*"
                  style={{ display: 'none' }}
                  onChange={(e) => handleUpload(e.target.files?.[0], 'bg')}
                />
                <button
                  className="btn btn-ghost"
                  style={{ width: '100%', marginTop: 8, justifyContent: 'center' }}
                  onClick={() => bgInputRef.current?.click()}
                  disabled={uploadingBg}
                >
                  <I.Image size={14} />{uploadingBg ? 'Mengunggah…' : config.bgImage ? 'Ganti Gambar Latar' : 'Unggah Gambar Latar'}
                </button>
                {config.bgImage && (
                  <div style={{ marginTop: 8, position: 'relative' }}>
                    <img src={config.bgImage} alt="bg" style={{ width: '100%', height: 64, objectFit: 'cover', borderRadius: 8 }} />
                    <button
                      onClick={() => update('bgImage', null)}
                      style={{
                        position: 'absolute', top: 4, right: 4,
                        background: 'rgba(0,0,0,0.6)', color: 'white',
                        border: 'none', borderRadius: '50%', width: 22, height: 22,
                        display: 'grid', placeItems: 'center', cursor: 'pointer',
                      }}
                    >
                      <I.X size={12} />
                    </button>
                  </div>
                )}
              </>
            )}
          </Section>
        </div>

        {/* Right: preview */}
        <div style={{ background: 'var(--bg-2)', overflow: 'auto', padding: 24 }}>
          <div style={{ maxWidth: 920, margin: '0 auto' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', display: 'flex', alignItems: 'center', gap: 6 }}>
                <I.Eye size={13} /> Pratinjau langsung — perubahan tampil real-time
              </div>
              <div style={{ display: 'flex', gap: 4, background: 'var(--surface)', borderRadius: 8, padding: 2, border: '1px solid var(--line)' }}>
                <button className="btn btn-ghost" style={{ padding: '4px 8px', fontSize: 12 }}>Desktop</button>
                <button className="btn btn-soft" style={{ padding: '4px 8px', fontSize: 12 }}>Mobile</button>
              </div>
            </div>
            <LandingPreview config={config} />
          </div>
        </div>
      </div>
    </div>
  );
}

function Section({ title, children }) {
  return (
    <div style={{ marginBottom: 22 }}>
      <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 }}>{title}</div>
      {children}
    </div>
  );
}

function TemplateThumb({ id, color }) {
  return (
    <div style={{ width: 38, height: 32, background: 'var(--bg-2)', borderRadius: 4, padding: 3, flexShrink: 0, border: '1px solid var(--line)' }}>
      {id === 'hero' && (
        <>
          <div style={{ height: 12, background: color, opacity: 0.8, borderRadius: 2, marginBottom: 2 }}></div>
          <div style={{ height: 3, background: 'var(--ink-4)', borderRadius: 1, marginBottom: 2 }}></div>
          <div style={{ height: 3, background: 'var(--ink-4)', width: '70%', borderRadius: 1 }}></div>
        </>
      )}
      {id === 'split' && (
        <div style={{ display: 'flex', gap: 2, height: '100%' }}>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 1.5, paddingTop: 2 }}>
            <div style={{ height: 3, background: 'var(--ink-4)', borderRadius: 1 }}></div>
            <div style={{ height: 3, background: 'var(--ink-4)', width: '70%', borderRadius: 1 }}></div>
            <div style={{ height: 5, background: color, opacity: 0.9, width: '60%', borderRadius: 1, marginTop: 'auto', marginBottom: 1 }}></div>
          </div>
          <div style={{ flex: 1, background: color, opacity: 0.7, borderRadius: 2 }}></div>
        </div>
      )}
      {id === 'minimal' && (
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 2 }}>
          <div style={{ width: 6, height: 6, background: color, borderRadius: 1.5 }}></div>
          <div style={{ height: 2, background: 'var(--ink-4)', width: '70%', borderRadius: 1 }}></div>
          <div style={{ height: 4, background: color, opacity: 0.9, width: '40%', borderRadius: 1, marginTop: 1 }}></div>
        </div>
      )}
    </div>
  );
}

function LandingPreview({ config }) {
  const bg = config.bg === 'gradient'
    ? `linear-gradient(135deg, ${config.color} 0%, oklch(0.42 0.20 290) 100%)`
    : config.bg === 'solid'
    ? config.color
    : `repeating-linear-gradient(135deg, ${config.color} 0 16px, oklch(0.42 0.18 285) 16px 32px)`;

  // shared block — render uploaded image kalau ada (live preview), fallback
  // ke avatar inisial (config.logo) kalau belum upload. Logo wide (mis. 300×136)
  // tampil natural sesuai aspect ratio, bukan dipaksa kotak.
  const Logo = () => (
    config.logoUrl ? (
      <img
        src={config.logoUrl}
        alt={config.brand || ''}
        style={{
          height: 44, width: 'auto', maxWidth: 200,
          objectFit: 'contain', display: 'block',
        }}
      />
    ) : (
      <div style={{
        width: 44, height: 44, borderRadius: 12,
        background: 'rgba(255,255,255,0.15)', backdropFilter: 'blur(10px)',
        border: '1px solid rgba(255,255,255,0.3)',
        display: 'grid', placeItems: 'center', color: 'white', fontWeight: 700, fontSize: 16,
      }}>{config.logo}</div>
    )
  );

  // Logo varian gelap-on-terang untuk template split/minimal (header putih).
  const LogoDark = ({ size = 44, fontSize = 16, radius = 12 }) => (
    config.logoUrl ? (
      <img
        src={config.logoUrl}
        alt={config.brand || ''}
        style={{
          height: size, width: 'auto', maxWidth: 200,
          objectFit: 'contain', display: 'block',
        }}
      />
    ) : (
      <div style={{
        width: size, height: size, borderRadius: radius,
        background: config.color, color: 'white',
        display: 'grid', placeItems: 'center',
        fontWeight: 700, fontSize,
      }}>{config.logo}</div>
    )
  );

  const Cta = () => (
    <button style={{
      background: 'white', color: config.color,
      border: 'none', borderRadius: 12, padding: '14px 24px',
      fontSize: 15, fontWeight: 600, cursor: 'pointer',
      boxShadow: '0 8px 20px -8px rgba(0,0,0,0.25)',
      display: 'inline-flex', alignItems: 'center', gap: 8,
    }}>
      {config.cta} <I.ArrowRight size={16} />
    </button>
  );

  if (config.template === 'hero') {
    return (
      <div className="card" style={{ overflow: 'hidden', padding: 0 }}>
        {/* Hero with decorative orbs */}
        <div style={{ background: bg, padding: '40px 36px 64px', color: 'white', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: -50, right: -50, width: 220, height: 220, borderRadius: '50%', background: 'rgba(255,255,255,0.10)' }} />
          <div style={{ position: 'absolute', bottom: -80, left: -40, width: 260, height: 260, borderRadius: '50%', background: 'rgba(255,255,255,0.06)' }} />

          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 10, marginBottom: 32 }}>
            <Logo />
            <div>
              <div style={{ fontWeight: 600, fontSize: 15 }}>{config.brand}</div>
              <div style={{ fontSize: 11.5, opacity: 0.8, fontWeight: 500 }}>Survei resmi</div>
            </div>
          </div>
          <h1 style={{ position: 'relative', fontSize: 36, fontWeight: 700, lineHeight: 1.15, letterSpacing: '-0.02em', margin: 0, maxWidth: 560 }}>
            {config.headline}
          </h1>
          <p style={{ position: 'relative', fontSize: 15, opacity: 0.9, lineHeight: 1.55, marginTop: 14, maxWidth: 480 }}>
            {config.subhead}
          </p>
          <div style={{ position: 'relative', marginTop: 26 }}><Cta /></div>
        </div>

        {/* Reward chip — overlap the hero */}
        <div style={{
          margin: '-30px 36px 0', position: 'relative',
          background: 'var(--surface)', border: '1px solid var(--line)',
          borderRadius: 14, padding: '12px 14px', boxShadow: 'var(--shadow-md)',
          display: 'flex', alignItems: 'center', gap: 12, maxWidth: 380,
        }}>
          <div style={{
            width: 40, height: 40, borderRadius: 11,
            background: `${config.color}15`, color: config.color,
            display: 'grid', placeItems: 'center', fontSize: 20, lineHeight: 1, flexShrink: 0,
          }}>🎟️</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 10.5, color: 'var(--ink-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
              Hadiah untukmu
            </div>
            <div style={{ fontSize: 13.5, fontWeight: 700, marginTop: 1, color: 'var(--ink)' }}>
              Voucher Rp 10.000
            </div>
          </div>
          <span style={{
            fontSize: 9, padding: '3px 7px', borderRadius: 999, fontWeight: 700,
            background: 'oklch(0.95 0.05 155)', color: 'oklch(0.42 0.14 155)',
            textTransform: 'uppercase', letterSpacing: '0.05em',
          }}>Otomatis</span>
        </div>

        {/* Stats + footer */}
        <div style={{ padding: '20px 36px', display: 'flex', gap: 14, fontSize: 12, color: 'var(--ink-3)', alignItems: 'center', flexWrap: 'wrap' }}>
          <span>⏱ ~2 menit</span>
          <span>📝 5 soal</span>
          <span>🔒 Anonim · tanpa spam</span>
          <span style={{ marginLeft: 'auto', fontWeight: 600, color: 'var(--ink-2)' }}>Powered by Survey TOM</span>
        </div>
      </div>
    );
  }

  if (config.template === 'split') {
    return (
      <div className="card" style={{ overflow: 'hidden', padding: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 440 }}>
        <div style={{ padding: '40px 36px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 28 }}>
            <LogoDark size={44} fontSize={16} />
            <div style={{ fontWeight: 600, fontSize: 15, color: 'var(--ink)' }}>{config.brand}</div>
          </div>
          <h1 style={{ fontSize: 30, fontWeight: 700, lineHeight: 1.2, letterSpacing: '-0.01em', margin: 0, color: 'var(--ink)' }}>
            {config.headline}
          </h1>
          <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.55, marginTop: 14 }}>
            {config.subhead}
          </p>
          <div style={{ marginTop: 22 }}>
            <button style={{
              background: config.color, color: 'white', border: 'none', borderRadius: 12,
              padding: '13px 22px', fontSize: 14.5, fontWeight: 600, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>{config.cta} <I.ArrowRight size={15} /></button>
          </div>
        </div>
        <div style={{ background: bg, position: 'relative', display: 'grid', placeItems: 'center', color: 'white' }}>
          <div className="ph-img" style={{ width: '70%', height: '70%', background: 'transparent', border: '1px dashed rgba(255,255,255,0.4)', color: 'rgba(255,255,255,0.85)' }}>
            BANNER 800×600
          </div>
        </div>
      </div>
    );
  }

  // minimal
  return (
    <div className="card" style={{ overflow: 'hidden', padding: 0, background: 'var(--surface)' }}>
      <div style={{ padding: '64px 36px', textAlign: 'center', borderBottom: `4px solid ${config.color}` }}>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}>
          <LogoDark size={56} fontSize={20} radius={16} />
        </div>
        <div style={{ fontSize: 12, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600 }}>{config.brand}</div>
        <h1 style={{ fontSize: 32, fontWeight: 700, lineHeight: 1.2, letterSpacing: '-0.02em', margin: '14px auto 12px', maxWidth: 540 }}>
          {config.headline}
        </h1>
        <p style={{ fontSize: 14.5, color: 'var(--ink-2)', lineHeight: 1.6, maxWidth: 480, margin: '0 auto' }}>
          {config.subhead}
        </p>
        <div style={{ marginTop: 28 }}>
          <button style={{
            background: config.color, color: 'white', border: 'none', borderRadius: 12,
            padding: '14px 28px', fontSize: 15, fontWeight: 600, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>{config.cta} <I.ArrowRight size={16} /></button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LandingCustomizer, LandingPreview });