// PAINS — "Dores do agricultor" section
// Editorial layout: big numbered pains with data + raw quotes from real producers

const PAINS = [
  {
    n: '01',
    pain: 'Decide no achismo, perde no clima.',
    stat: '63%',
    statLabel: 'das perdas em pequenas propriedades vêm de janela de plantio errada',
    quote: 'A gente plantava no dia que sempre plantou. Esse ano o veranico de fevereiro queimou tudo.',
    voice: 'José Carlos, milho · Conquista/BA',
    bands: ['CLIMA', 'PLANTIO', 'PERDA'],
  },
  {
    n: '02',
    pain: 'Não vê a praga antes de virar prejuízo.',
    stat: '21 dias',
    statLabel: 'é o atraso médio entre infestação e detecção visual no talhão',
    quote: 'Quando o agrônomo chegou, a lagarta já tinha tomado conta de 40 hectares. Aí é tarde.',
    voice: 'Mariana, algodão · LEM/BA',
    bands: ['PRAGA', 'DETECÇÃO', 'TARDE'],
  },
  {
    n: '03',
    pain: 'Vende para o atravessador na pior hora.',
    stat: '−R$ 18',
    statLabel: 'por saca, em média, vs. preço de pico do trimestre',
    quote: 'O caminhão chega, oferece um preço, e a gente vende. Não tem tempo de pesquisar mercado.',
    voice: 'Sr. Antônio, mandioca · Quixadá/CE',
    bands: ['PREÇO', 'VENDA', 'MARGEM'],
  },
  {
    n: '04',
    pain: 'Crédito é negado por falta de histórico digital.',
    stat: '4 em 10',
    statLabel: 'pequenos produtores têm Pronaf negado por documentação incompleta',
    quote: 'Faço a mesma roça há 22 anos. Mas no banco eu não existo, porque não tenho papel.',
    voice: 'Dona Luzia, feijão · Petrolina/PE',
    bands: ['CRÉDITO', 'PRONAF', 'BUROCRACIA'],
  },
];

function Pains() {
  return (
    <section id="dores" style={{ position: 'relative', padding: '120px 32px', zIndex: 2, background: 'var(--bg-2)' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <SectionLabel num="02" title="Dores do produtor brasileiro" />
        <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'end' }}>
          <h2 className="serif" style={{
            fontSize: 'clamp(40px, 5.4vw, 84px)',
            lineHeight: 0.97, margin: 0, letterSpacing: '-0.022em',
          }}>
            Quatro problemas que<br/>
            <span className="it" style={{ color: 'var(--terra)' }}>nenhuma</span> planilha resolve.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--ink-2)', margin: 0, maxWidth: 440 }}>
            Conversamos com 1.412 produtores entre 2024 e 2026. Os mesmos quatro
            gargalos apareceram do sertão pernambucano à fronteira agrícola do MT.
            O Agro Amigo foi desenhada para atacar cada um deles.
          </p>
        </div>

        <div style={{ marginTop: 72, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', borderTop: '1px solid var(--line)', borderLeft: '1px solid var(--line)' }}>
          {PAINS.map((p, i) => (
            <article key={i} style={{
              padding: 36,
              borderRight: '1px solid var(--line)',
              borderBottom: '1px solid var(--line)',
              background: 'var(--paper)',
              display: 'flex', flexDirection: 'column', gap: 20,
              minHeight: 380,
              position: 'relative',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <span className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', color: 'var(--muted)' }}>
                  DOR · {p.n}
                </span>
                <div style={{ display: 'flex', gap: 4 }}>
                  {p.bands.map(b => (
                    <span key={b} className="mono" style={{ fontSize: 9, padding: '3px 7px', border: '1px solid var(--line-2)', color: 'var(--ink-2)', letterSpacing: '0.08em' }}>{b}</span>
                  ))}
                </div>
              </div>

              <h3 className="serif" style={{ fontSize: 32, lineHeight: 1.05, margin: 0, letterSpacing: '-0.018em' }}>
                {p.pain}
              </h3>

              <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, paddingTop: 8, paddingBottom: 8, borderTop: '1px dashed var(--line)', borderBottom: '1px dashed var(--line)' }}>
                <span className="serif" style={{ fontSize: 56, lineHeight: 1, color: 'var(--terra)', letterSpacing: '-0.025em' }}>{p.stat}</span>
                <span style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.4 }}>{p.statLabel}</span>
              </div>

              <blockquote style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: 'var(--ink)', fontStyle: 'italic', position: 'relative', paddingLeft: 18 }}>
                <span style={{ position: 'absolute', left: 0, top: -4, fontSize: 36, color: 'var(--terra)', lineHeight: 1, fontFamily: 'Instrument Serif, serif' }}>"</span>
                {p.quote}
              </blockquote>
              <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.05em' }}>— {p.voice}</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// APP DEMOS — three iPhone screens showing AGRA in action
// ─────────────────────────────────────────────────────────────

function AppDemos() {
  return (
    <section id="aplicativo" style={{ position: 'relative', padding: '120px 32px', zIndex: 2, background: 'var(--ink)', color: 'var(--paper)', overflow: 'hidden' }}>
      {/* subtle grid bg */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(rgba(248,245,236,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(248,245,236,0.04) 1px, transparent 1px)',
        backgroundSize: '64px 64px',
        pointerEvents: 'none',
      }}/>
      <div style={{ maxWidth: 1320, margin: '0 auto', position: 'relative' }}>
        <SectionLabel num="04" title="No bolso, do roçado ao escritório" dark />

        <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, alignItems: 'end' }}>
          <h2 className="serif" style={{
            fontSize: 'clamp(40px, 5.4vw, 84px)',
            lineHeight: 0.97, margin: 0, letterSpacing: '-0.022em', color: 'var(--paper)',
          }}>
            Funciona no <span className="it" style={{ color: 'var(--gold)' }}>WhatsApp</span><br/>
            que você já tem.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: 'rgba(248,245,236,0.7)', margin: 0, maxWidth: 440 }}>
            Sem app pra baixar. Sem login complicado. O Agro Amigo chega como mensagem do
            número 0800-AGRO, com texto, áudio ou foto da plantação. Para
            cooperativas e bancos, há também o painel web e API.
          </p>
        </div>

        {/* phone showcase */}
        <div style={{
          marginTop: 80,
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 24,
          alignItems: 'start',
        }}>
          <DemoCard
            num="01"
            title="WhatsApp · Pergunta + foto"
            desc="Produtor manda foto da folha. Agro Amigo identifica praga, dose e janela de pulverização."
            tilt={-3}
          >
            <ChatScreen />
          </DemoCard>

          <DemoCard
            num="02"
            title="Plano de Safra · 12 meses"
            desc="Calendário inteligente: o que fazer, quando, com qual custo previsto e qual janela climática ideal."
            tilt={2}
            offsetY={40}
          >
            <SafraScreen />
          </DemoCard>

          <DemoCard
            num="03"
            title="Alertas · Mercado e clima"
            desc="Notificações inteligentes só quando vale a pena agir — pico de preço, risco de praga, janela climática."
            tilt={-1.5}
          >
            <AlertScreen />
          </DemoCard>
        </div>

        <div style={{ marginTop: 80, display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24, borderTop: '1px solid rgba(248,245,236,0.15)' }}>
          <span className="mono" style={{ fontSize: 11, color: 'rgba(248,245,236,0.5)', letterSpacing: '0.1em' }}>
            DISPONÍVEL EM: WHATSAPP · iOS · ANDROID · WEB · API
          </span>
          <button onClick={() => window.open('https://wa.me/5543996261624?text=' + encodeURIComponent('Olá! Quero conversar com o Agro Amigo.'), '_blank', 'noopener')} style={{
            background: 'var(--gold)', color: 'var(--ink)',
            border: 0, padding: '12px 22px', borderRadius: 999,
            fontSize: 14, fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>
            Conversar COM AGRO AMIGO agora
            <span style={{ fontSize: 18 }}>→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

function DemoCard({ num, title, desc, children, tilt = 0, offsetY = 0 }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: offsetY }}>
      <div style={{
        transform: `scale(0.62) rotate(${tilt}deg)`,
        transformOrigin: 'top center',
        marginBottom: -270,
        transition: 'transform .4s ease',
      }} className="phone-tilt">
        {children}
      </div>
      <div style={{
        marginTop: 32,
        textAlign: 'center',
        maxWidth: 320,
        padding: '0 12px',
      }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', color: 'var(--gold)', marginBottom: 10 }}>
          {num}
        </div>
        <h3 className="serif" style={{ fontSize: 26, lineHeight: 1.15, margin: 0, marginBottom: 10, letterSpacing: '-0.015em', color: 'var(--paper)' }}>
          {title}
        </h3>
        <p style={{ fontSize: 13, color: 'rgba(248,245,236,0.65)', lineHeight: 1.55, margin: 0 }}>
          {desc}
        </p>
      </div>
      <style>{`.phone-tilt:hover { transform: scale(0.64) rotate(0deg) !important; }`}</style>
    </div>
  );
}

// ─── Phone screen 1: WhatsApp-like chat ────────────────────
function ChatScreen() {
  return (
    <IOSDevice width={380} height={780} dark={false}>
      <div style={{ paddingTop: 56, height: '100%', background: '#E8DFD0', display: 'flex', flexDirection: 'column' }}>
        {/* WA-like header */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '8px 14px 12px', background: '#1E5C44', color: '#fff',
        }}>
          <span style={{ fontSize: 22 }}>‹</span>
          <div style={{
            width: 38, height: 38, borderRadius: '50%',
            background: '#C8A24A', display: 'grid', placeItems: 'center',
            color: '#1E3A2C', fontWeight: 700, fontFamily: 'Instrument Serif, serif', fontSize: 18,
          }}>A</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 15, fontWeight: 600 }}>Agro Amigo</div>
            <div style={{ fontSize: 11, opacity: 0.85 }}>● online · digitando...</div>
          </div>
          <span style={{ fontSize: 16 }}>⋮</span>
        </div>

        {/* messages */}
        <div style={{ flex: 1, padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 8, overflow: 'hidden' }}>
          <Bubble side="me">Bom dia, encontrei isso aqui no algodão</Bubble>

          {/* photo bubble */}
          <div style={{ alignSelf: 'flex-end', maxWidth: '78%' }}>
            <div style={{
              background: '#DCF8C6', padding: 4, borderRadius: 10,
              boxShadow: '0 1px 1px rgba(0,0,0,0.08)',
            }}>
              <div style={{
                width: 200, height: 130, borderRadius: 8,
                background: 'linear-gradient(135deg, #4F8A6B 0%, #2D5740 50%, #1E3A2C 100%)',
                position: 'relative', overflow: 'hidden',
              }}>
                {/* fake leaf with damage */}
                <svg width="200" height="130" viewBox="0 0 200 130" style={{ position: 'absolute', inset: 0 }}>
                  <ellipse cx="100" cy="65" rx="80" ry="40" fill="#65A37C"/>
                  <path d="M30 65 Q100 35 170 65" stroke="#3E6951" strokeWidth="1.5" fill="none"/>
                  <circle cx="70" cy="55" r="6" fill="#1E3A2C" opacity="0.7"/>
                  <circle cx="120" cy="70" r="4" fill="#1E3A2C" opacity="0.6"/>
                  <circle cx="95" cy="80" r="5" fill="#1E3A2C" opacity="0.55"/>
                  <path d="M100 50 L98 58 L92 56 L96 64 L88 65 L94 70 L88 76" stroke="#0B100D" strokeWidth="1.2" fill="none" opacity="0.6"/>
                </svg>
                <div style={{ position: 'absolute', bottom: 6, right: 8, fontSize: 9, color: '#fff', textShadow: '0 1px 2px rgba(0,0,0,0.5)' }}>
                  IMG_2841.jpg
                </div>
              </div>
              <div style={{ fontSize: 10, color: '#667', textAlign: 'right', padding: '2px 4px 0' }}>09:42 ✓✓</div>
            </div>
          </div>

          <Bubble side="agra">
            <div style={{ fontWeight: 600, marginBottom: 4, color: '#1E3A2C', fontSize: 13 }}>
              ⚠ Lagarta-do-cartucho · Spodoptera frugiperda
            </div>
            <div style={{ fontSize: 13, color: '#14201A' }}>
              Confiança 96%. Dano em estágio inicial (V4-V6).
            </div>
          </Bubble>

          <Bubble side="agra">
            <div style={{ fontSize: 13, color: '#14201A' }}>
              <b>Recomendação:</b> Bacillus thuringiensis 0.5L/ha + monitoramento semanal. Pulverizar entre 16h-18h, dias <b>11-13/abr</b> (sem chuva prevista).
            </div>
            <div style={{ marginTop: 8, padding: '6px 8px', background: 'rgba(30,58,44,0.06)', borderLeft: '2px solid #1E3A2C', fontSize: 11, color: '#2A3530' }}>
              💰 Custo estimado: R$ 38/ha — 4× menor que químico convencional
            </div>
          </Bubble>

          <Bubble side="me">e o crédito, dá pra financiar?</Bubble>

          <div style={{ alignSelf: 'flex-start', display: 'flex', gap: 4, marginTop: 2 }}>
            {[0,1,2].map(k => (
              <span key={k} style={{
                width: 5, height: 5, borderRadius: '50%', background: '#888',
                animation: 'typing 1.2s ease-in-out infinite',
                animationDelay: `${k*0.15}s`,
              }}/>
            ))}
          </div>
        </div>

        {/* input bar */}
        <div style={{ padding: '8px 10px', background: '#E8DFD0', display: 'flex', gap: 8, alignItems: 'center' }}>
          <div style={{ flex: 1, background: '#fff', borderRadius: 24, padding: '10px 14px', fontSize: 13, color: '#888' }}>Mensagem</div>
          <div style={{ width: 38, height: 38, borderRadius: '50%', background: '#1E5C44', display: 'grid', placeItems: 'center', color: '#fff', fontSize: 16 }}>🎤</div>
        </div>
      </div>
      <style>{`@keyframes typing { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; transform: translateY(-2px); } }`}</style>
    </IOSDevice>
  );
}

function Bubble({ side, children }) {
  const me = side === 'me';
  return (
    <div style={{
      alignSelf: me ? 'flex-end' : 'flex-start',
      maxWidth: '82%',
      background: me ? '#DCF8C6' : '#fff',
      padding: '8px 12px',
      borderRadius: 10,
      borderTopRightRadius: me ? 2 : 10,
      borderTopLeftRadius: me ? 10 : 2,
      fontSize: 13, lineHeight: 1.4,
      color: '#14201A',
      boxShadow: '0 1px 1px rgba(0,0,0,0.08)',
    }}>
      {children}
      <div style={{ fontSize: 9, color: '#888', textAlign: 'right', marginTop: 2 }}>09:43 {me && '✓✓'}</div>
    </div>
  );
}

// ─── Phone screen 2: Plano de Safra (12 months) ────────────
function SafraScreen() {
  const months = [
    { m: 'OUT', y: '25', stage: 'Preparo', color: '#65A37C', task: 'Análise de solo · cálculo de calagem', cost: 'R$ 480/ha' },
    { m: 'NOV', y: '25', stage: 'Plantio', color: '#4F8A6B', task: 'Janela ideal: 11–18/nov · variedade BRS-1055', cost: 'R$ 1.840/ha', highlight: true },
    { m: 'DEZ', y: '25', stage: 'Manejo', color: '#3E6951', task: 'Adubação cobertura · 1ª aplicação herbicida', cost: 'R$ 320/ha' },
    { m: 'JAN', y: '26', stage: 'Manejo', color: '#3E6951', task: 'Monitoramento NDVI semanal · risco lagarta', cost: 'R$ 180/ha' },
    { m: 'FEV', y: '26', stage: 'Atenção', color: '#B8542A', task: 'Veranico previsto 18–24/fev · irrigar T-03', cost: 'R$ 240/ha', alert: true },
    { m: 'MAR', y: '26', stage: 'Colheita', color: '#C8A24A', task: 'Maturação · janela colheita 12–22/mar', cost: 'R$ 410/ha' },
    { m: 'ABR', y: '26', stage: 'Venda', color: '#1E3A2C', task: 'Pico de preço previsto · vender 14–16/abr', cost: '+R$ 18/sc', highlight: true },
  ];
  return (
    <IOSDevice width={380} height={780} dark>
      <div style={{ paddingTop: 56, height: '100%', background: '#0B100D', color: '#fff', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '8px 18px 16px' }}>
          <div style={{ fontSize: 11, opacity: 0.55, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.1em' }}>SAFRA 25/26 · MILHO · 80HA</div>
          <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 28, lineHeight: 1.05, marginTop: 4 }}>
            Plano de Safra<br/>
            <span style={{ color: '#C8A24A', fontStyle: 'italic', fontSize: 22 }}>gerado pela IA</span>
          </div>
          <div style={{ marginTop: 12, display: 'flex', gap: 14, fontSize: 11, fontFamily: 'JetBrains Mono, monospace', opacity: 0.7 }}>
            <span>Custo total: <b style={{ color: '#fff' }}>R$ 277.600</b></span>
            <span>Margem prev.: <b style={{ color: '#65A37C' }}>+27%</b></span>
          </div>
        </div>

        {/* Timeline */}
        <div style={{ flex: 1, overflow: 'auto', padding: '0 16px 16px', position: 'relative' }}>
          {/* vertical guide line */}
          <div style={{ position: 'absolute', left: 36, top: 8, bottom: 16, width: 1, background: 'rgba(255,255,255,0.12)' }}/>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {months.map((mo, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '40px 1fr', gap: 14, alignItems: 'flex-start' }}>
                {/* node */}
                <div style={{ position: 'relative', height: 40, display: 'flex', justifyContent: 'center' }}>
                  <div style={{
                    width: 14, height: 14, borderRadius: '50%',
                    background: mo.color,
                    marginTop: 14,
                    boxShadow: mo.highlight ? `0 0 0 4px ${mo.color}33` : 'none',
                    border: '2px solid #0B100D',
                    zIndex: 1,
                  }}/>
                </div>
                {/* card */}
                <div style={{
                  background: mo.highlight
                    ? 'linear-gradient(180deg, rgba(200,162,74,0.12) 0%, rgba(200,162,74,0.04) 100%)'
                    : mo.alert ? 'rgba(184,84,42,0.08)' : 'rgba(255,255,255,0.03)',
                  border: '1px solid ' + (mo.highlight ? 'rgba(200,162,74,0.35)' : mo.alert ? 'rgba(184,84,42,0.3)' : 'rgba(255,255,255,0.08)'),
                  borderRadius: 12, padding: 10,
                }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                      <span style={{ fontFamily: 'Instrument Serif, serif', fontSize: 18, color: '#fff' }}>{mo.m}<span style={{ opacity: 0.5, fontSize: 13 }}>/{mo.y}</span></span>
                      <span style={{ fontSize: 9, padding: '2px 6px', background: mo.color, color: '#0B100D', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.08em', fontWeight: 600 }}>{mo.stage.toUpperCase()}</span>
                    </div>
                    <span style={{ fontSize: 10, fontFamily: 'JetBrains Mono, monospace', color: mo.cost.startsWith('+') ? '#65A37C' : 'rgba(255,255,255,0.5)' }}>{mo.cost}</span>
                  </div>
                  <div style={{ fontSize: 12, lineHeight: 1.4, color: 'rgba(255,255,255,0.85)' }}>{mo.task}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ padding: '12px 18px 18px', borderTop: '1px solid rgba(255,255,255,0.08)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: 'rgba(200,162,74,0.06)' }}>
          <div>
            <div style={{ fontSize: 9, color: '#C8A24A', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.1em' }}>PRÓXIMA AÇÃO · EM 4 DIAS</div>
            <div style={{ fontSize: 13, marginTop: 2 }}>Plantio T-01 e T-02</div>
          </div>
          <div style={{ padding: '8px 14px', background: '#C8A24A', color: '#0B100D', borderRadius: 999, fontSize: 11, fontWeight: 600 }}>Ver detalhes →</div>
        </div>
      </div>
    </IOSDevice>
  );
}

// ─── Phone screen 3: alerts feed ──────────────────────────
function AlertScreen() {
  const items = [
    { icon: '↗', tone: 'gold', tag: 'PICO DE PREÇO', title: 'Soja: vender nas próximas 72h', sub: 'CEPEA Sorriso/MT · R$ 142,30/sc · pico previsto 14-16/abr', time: 'agora' },
    { icon: '☁', tone: 'green', tag: 'JANELA DE PLANTIO', title: 'Milho safrinha: ideal entre 11-18/abr', sub: 'Conquista/BA · 47mm previstos · solo em capacidade de campo', time: '2h' },
    { icon: '!', tone: 'terra', tag: 'RISCO DE PRAGA', title: '38 talhões com sinais de lagarta', sub: 'Algodão · região LEM/BA · ação recomendada em 5 dias', time: '6h' },
    { icon: '$', tone: 'green', tag: 'CRÉDITO PRÉ-APROVADO', title: 'FNE Verde · até R$ 412 mil', sub: 'Score Agro Amigo: A2 · taxa 8.5% a.a. · 8 anos', time: 'ontem' },
    { icon: '☉', tone: 'gold', tag: 'CLIMA · 14 DIAS', title: 'Veranico provável de 20 a 27/abr', sub: 'Confiança 78% · ECMWF + INMET cruzados', time: 'ontem' },
  ];
  const tones = {
    gold: { bg: 'rgba(200,162,74,0.12)', fg: '#C8A24A', border: 'rgba(200,162,74,0.4)' },
    green: { bg: 'rgba(79,138,107,0.15)', fg: '#65A37C', border: 'rgba(79,138,107,0.4)' },
    terra: { bg: 'rgba(184,84,42,0.12)', fg: '#D67A45', border: 'rgba(184,84,42,0.4)' },
  };
  return (
    <IOSDevice width={380} height={780} dark>
      <div style={{ paddingTop: 56, height: '100%', background: '#0B100D', color: '#fff', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '8px 18px 16px' }}>
          <div style={{ fontSize: 12, opacity: 0.6, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.1em' }}>HOJE · 09 MAI 2026</div>
          <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 32, lineHeight: 1.05, marginTop: 4 }}>
            Bom dia, José.<br/>
            <span style={{ color: '#C8A24A', fontStyle: 'italic' }}>5 alertas</span> que valem agir.
          </div>
        </div>

        <div style={{ flex: 1, overflow: 'auto', padding: '0 12px', display: 'flex', flexDirection: 'column', gap: 8 }}>
          {items.map((it, i) => {
            const t = tones[it.tone];
            return (
              <div key={i} style={{
                background: t.bg,
                border: `1px solid ${t.border}`,
                borderRadius: 14,
                padding: '14px 14px',
                display: 'grid',
                gridTemplateColumns: '32px 1fr auto',
                gap: 12,
                alignItems: 'flex-start',
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: '50%',
                  background: t.fg, color: '#0B100D',
                  display: 'grid', placeItems: 'center',
                  fontSize: 16, fontWeight: 700,
                }}>{it.icon}</div>
                <div>
                  <div style={{ fontSize: 9, color: t.fg, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.1em', marginBottom: 4 }}>{it.tag}</div>
                  <div style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.25, marginBottom: 4 }}>{it.title}</div>
                  <div style={{ fontSize: 11, opacity: 0.65, lineHeight: 1.4 }}>{it.sub}</div>
                </div>
                <div style={{ fontSize: 10, opacity: 0.5, fontFamily: 'JetBrains Mono, monospace' }}>{it.time}</div>
              </div>
            );
          })}
        </div>

        <div style={{ padding: '12px 14px 18px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 4, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
          {[
            { l: 'Hoje', a: true },
            { l: 'Mapa' },
            { l: 'Mercado' },
            { l: 'Agro Amigo' },
          ].map((tab, i) => (
            <div key={i} style={{
              padding: '8px 0', textAlign: 'center', fontSize: 10,
              fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.08em',
              color: tab.a ? '#C8A24A' : 'rgba(255,255,255,0.5)',
              borderTop: tab.a ? '2px solid #C8A24A' : '2px solid transparent',
              marginTop: -1,
            }}>{tab.l.toUpperCase()}</div>
          ))}
        </div>
      </div>
    </IOSDevice>
  );
}

window.Pains = Pains;
window.AppDemos = AppDemos;