/* Manifesto, How-it-works, Day-in-the-life, About, Listen, Why Harold */

function MLManifesto() {
  const t = window.mlTokens;
  const isMobile = window.useMobile();
  const nos = [
    'No ads',
    'No emails',
    'No apps',
    'No spin',
    'No bias',
    'No doomscroll',
    'No rage-bait',
    'No fear-mongering',
    'No clickbait',
  ];
  return (
    <section style={{
      position:'relative', zIndex: 2,
      padding: isMobile ? '56px 0 40px' : '96px 0 72px',
      maxWidth: 1100, margin:'0 auto',
      textAlign:'center',
    }}>
      <window.MLKicker>☀ THE HAROLD PROMISE</window.MLKicker>
      <window.MLH2 style={{fontSize: isMobile ? 36 : 64}}>
        Just the headlines.<br/>
        <span style={{fontStyle:'italic', color: t.ink60, fontWeight: 400}}>No spin. No opinion. No ads.</span>
      </window.MLH2>
      <p style={{
        marginTop: 22, fontSize: 17, lineHeight: 1.55,
        color: t.ink60, maxWidth: 560, margin:'22px auto 0',
      }}>
        Harold cuts everything out of the news that isn't actually the news. What's left
        is what you actually need to know. That's it.
      </p>

      <div style={{
        marginTop: 56,
        display:'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.05fr 1fr',
        gap: isMobile ? 24 : 48,
        alignItems:'center',
        textAlign:'left',
        background: t.paper,
        border:'1px solid rgba(42,24,16,0.08)',
        borderRadius: 32,
        padding: isMobile ? '28px 20px' : '40px 44px',
        boxShadow: t.card,
      }}>
        {/* LEFT: political image with no-symbol overlay */}
        <div style={{position:'relative'}}>
          <div style={{
            position:'relative', borderRadius: 20, overflow:'hidden',
            aspectRatio: '1/1',
            boxShadow: '0 20px 40px rgba(42,24,16,0.18)',
            border:'1px solid rgba(42,24,16,0.1)',
          }}>
            <img src="assets/political-opposition.png"
              alt="Political chaos — donkey vs elephant"
              style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
            {/* No-symbol overlay */}
            <svg viewBox="0 0 100 100" preserveAspectRatio="none"
              style={{position:'absolute', inset: 0, width:'100%', height:'100%', opacity: 0.58}}>
              <defs>
                <filter id="noShadow" x="-10%" y="-10%" width="120%" height="120%">
                  <feDropShadow dx="0" dy="1.2" stdDeviation="1.6" floodColor="#000" floodOpacity="0.5"/>
                </filter>
              </defs>
              <g filter="url(#noShadow)">
                <circle cx="50" cy="50" r="38" fill="none" stroke="#E11D2E" strokeWidth="7"/>
                <line x1="23" y1="23" x2="77" y2="77" stroke="#E11D2E" strokeWidth="7" strokeLinecap="round"/>
              </g>
            </svg>
          </div>
          <div style={{
            marginTop: 18,
            fontFamily: t.mono, fontSize: 11, letterSpacing:'0.2em',
            color: t.ink40, textAlign:'center', fontWeight: 600,
          }}>
            NO LEFT · NO RIGHT · NO BLUE · NO RED
          </div>
          <p style={{
            marginTop: 10, textAlign:'center', fontFamily: t.sans,
            fontSize: isMobile ? 18 : 22, lineHeight: 1.15, letterSpacing:'-0.02em',
            fontWeight: 700, color: t.ink,
          }}>
            No political spin.<br/>
            <span style={{fontWeight: 400, fontStyle:'italic', color: t.ink60, fontSize: isMobile ? 15 : 18}}>
              Just what actually happened.
            </span>
          </p>
        </div>

        {/* RIGHT: bullet list with red-slash bullets */}
        <div>
          <ul style={{
            listStyle:'none', padding: 0, margin: 0,
            display:'grid', gap: isMobile ? 12 : 18,
          }}>
            {nos.map((n, i)=>(
              <li key={i} style={{
                display:'flex', alignItems:'center', gap: isMobile ? 12 : 20,
                fontFamily: t.sans, fontSize: isMobile ? 22 : 29, fontWeight: 700,
                letterSpacing:'-0.02em', color: t.ink,
                whiteSpace:'nowrap',
              }}>
                <span style={{
                  flexShrink: 0,
                  width: isMobile ? 32 : 40, height: isMobile ? 32 : 40, borderRadius: 999,
                  background:'#FFF3E6',
                  display:'inline-flex', alignItems:'center', justifyContent:'center',
                  position:'relative',
                }}>
                  <svg width={isMobile ? 32 : 40} height={isMobile ? 32 : 40} viewBox="0 0 30 30" fill="none">
                    <circle cx="15" cy="15" r="13" stroke={t.coral} strokeWidth="2.5"/>
                    <line x1="7" y1="23" x2="23" y2="7" stroke={t.coral} strokeWidth="2.5" strokeLinecap="round"/>
                  </svg>
                </span>
                <span>{n}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <p style={{
        marginTop: 44, fontSize: 15, color: t.ink60, maxWidth: 560, margin:'44px auto 0',
      }}>
        <strong style={{color: t.coral}}>Just headlines,</strong> so you know what's going on.
      </p>
    </section>
  );
}

function MLNoPoliticsArt() {
  const t = window.mlTokens;
  return (
    <div style={{
      position:'relative',
      background:'linear-gradient(180deg, #FFF3E6 0%, #FFE0B5 100%)',
      border:'1.5px solid rgba(42,24,16,0.1)',
      borderRadius: 24,
      padding: 28,
      height: 280,
      overflow:'hidden',
      display:'flex', alignItems:'center', justifyContent:'center',
    }}>
      {/* subtle stars pattern backdrop */}
      <svg width="100%" height="100%" viewBox="0 0 400 260" preserveAspectRatio="xMidYMid meet"
        style={{position:'absolute', inset: 0, width:'100%', height:'100%'}}>
        <defs>
          <pattern id="dotsBlue" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
            <circle cx="10" cy="10" r="1.2" fill="#2B5AA0" opacity="0.15"/>
          </pattern>
          <pattern id="stripesRed" x="0" y="0" width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
            <rect x="0" y="0" width="7" height="14" fill="#C63B3B" opacity="0.14"/>
          </pattern>
        </defs>
        <rect x="0" y="0" width="200" height="260" fill="url(#dotsBlue)"/>
        <rect x="200" y="0" width="200" height="260" fill="url(#stripesRed)"/>

        {/* DONKEY (left) — simple silhouette facing right */}
        <g transform="translate(50, 70)" fill="#2B5AA0" opacity="0.85">
          {/* body */}
          <ellipse cx="55" cy="75" rx="48" ry="28"/>
          {/* legs */}
          <rect x="22" y="90" width="10" height="38" rx="3"/>
          <rect x="42" y="92" width="10" height="36" rx="3"/>
          <rect x="68" y="92" width="10" height="36" rx="3"/>
          <rect x="88" y="90" width="10" height="38" rx="3"/>
          {/* neck + head */}
          <path d="M 95 70 Q 115 55, 125 40 Q 135 28, 128 18 L 120 20 Q 115 32, 108 42 Q 98 52, 92 58 Z"/>
          {/* ears */}
          <path d="M 120 22 Q 118 8, 126 2 Q 132 4, 130 18 Z"/>
          <path d="M 126 20 Q 130 6, 138 4 Q 142 10, 136 22 Z"/>
          {/* tail */}
          <path d="M 8 70 Q -2 78, 2 95 L 10 92 Q 12 80, 18 75 Z"/>
          {/* eye */}
          <circle cx="120" cy="32" r="2" fill="#FFF3E6"/>
        </g>

        {/* ELEPHANT (right) — silhouette facing left */}
        <g transform="translate(250, 65)" fill="#C63B3B" opacity="0.85">
          {/* body */}
          <ellipse cx="60" cy="80" rx="55" ry="32"/>
          {/* legs */}
          <rect x="22" y="95" width="14" height="38" rx="4"/>
          <rect x="45" y="98" width="14" height="35" rx="4"/>
          <rect x="70" y="98" width="14" height="35" rx="4"/>
          <rect x="92" y="95" width="14" height="38" rx="4"/>
          {/* head */}
          <ellipse cx="22" cy="62" rx="28" ry="26"/>
          {/* ear */}
          <path d="M 30 45 Q 12 30, 2 45 Q 0 70, 18 75 Z"/>
          {/* trunk */}
          <path d="M -2 68 Q -14 80, -10 95 Q -4 102, 2 95 Q -4 88, 2 82 Q 10 78, 14 72 Z"/>
          {/* tusk */}
          <path d="M 4 78 L -6 86 L -2 88 L 8 82 Z" fill="#FFF3E6" opacity="0.9"/>
          {/* tail */}
          <path d="M 114 75 Q 124 80, 122 95 L 116 93 Q 114 85, 110 82 Z"/>
          {/* eye */}
          <circle cx="14" cy="58" r="2.2" fill="#FFF3E6"/>
        </g>

        {/* Giant slash across both */}
        <circle cx="200" cy="130" r="105" fill="none" stroke={t.coral} strokeWidth="7" opacity="0.92"/>
        <line x1="130" y1="60" x2="270" y2="200" stroke={t.coral} strokeWidth="7" strokeLinecap="round" opacity="0.92"/>
      </svg>
    </div>
  );
}

function MLHowItWorks() {
  const t = window.mlTokens;
  const isMobile = window.useMobile();
  const steps = [
    {
      n: '01', time: '24 / 7 / 365',
      title: 'Harold reads… everything.',
      body: 'Full spectrum — Harold reads every angle: BBC, AP, Reuters, NPR, WSJ, Fox, Turning Point, Breaking Points, National Review, local papers, tech blogs, financial wires, niche newsletters. Left, right, global, hyper-local. Then he ruthlessly strips the bul***t outrage clickbait nonsense.',
      art: 'sources',
    },
    {
      n: '02', time: '6:00 AM',
      title: <>Harold records a short, balanced audio briefing.<br/>For you.</>,
      body: 'Stories are cross-referenced, spin is stripped, and what remains becomes a tight 5-minute audio file designed and read for you, specifically. Harold is your personal news anchor that delivers the news on the topics you control, when you want it.',
      art: 'writing',
    },
    {
      n: '03', time: '6:30 AM · sharp',
      title: <>Delivered by text/SMS.<br/>No emails.</>,
      body: 'A single SMS audio file, one tap to play. Trigger-free headlines during your AM & PM routines. No app. No ads. No login. No feed. Just facts, on the go.',
      art: 'sms',
    },
  ];

  return (
    <section id="how-it-works" style={{
      position:'relative', zIndex: 2,
      padding: isMobile ? '48px 0' : '72px 0',
      maxWidth: 1100, margin:'0 auto',
    }}>
      <div style={{textAlign:'center', marginBottom: isMobile ? 32 : 56}}>
        <window.MLKicker>☀ HOW IT WORKS</window.MLKicker>
        <window.MLH2>Your anti-outrage, non-clickbait,<br/>trigger-free way to stay in the know.</window.MLH2>
      </div>

      <div style={{display:'flex', flexDirection:'column', gap: isMobile ? 16 : 24}}>
        {steps.map((s, i)=>(
          <div key={i} style={{
            display:'grid',
            gridTemplateColumns: isMobile ? '1fr' : (i%2===0 ? '1.1fr 1fr' : '1fr 1.1fr'),
            gap: isMobile ? 20 : 40,
            alignItems:'center',
            background: t.paper,
            borderRadius: 28,
            padding: isMobile ? '24px 20px' : 40,
            border:'1px solid rgba(42,24,16,0.08)',
            boxShadow: t.card,
          }}>
            <div style={{order: isMobile ? 2 : (i%2===0 ? 1 : 2)}}>
              <div style={{display:'flex', alignItems:'center', gap:14, marginBottom: 16}}>
                <span style={{
                  fontFamily: t.mono, fontSize: 11, letterSpacing:'0.2em',
                  padding:'6px 12px', borderRadius: 999,
                  background:'#FFF3E6', color: t.coral, fontWeight: 600, whiteSpace:'nowrap',
                }}>STEP {s.n}</span>
                <span style={{fontFamily: t.mono, fontSize: 12, color: t.ink40, letterSpacing:'0.08em', whiteSpace:'nowrap'}}>{s.time}</span>
              </div>
              <h3 style={{
                fontFamily: t.sans, fontSize: isMobile ? 28 : 38, lineHeight: 1.05,
                letterSpacing:'-0.03em', fontWeight: 700,
                color: t.ink, margin: 0,
              }}>{s.title}</h3>
              <p style={{
                marginTop: 16, fontSize: isMobile ? 15 : 16, lineHeight: 1.6,
                color: t.ink60, maxWidth: 460,
              }}>{s.body}</p>
            </div>
            <div style={{order: isMobile ? 1 : (i%2===0 ? 2 : 1)}}>
              <MLHowArt kind={s.art}/>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function MLHowArt({kind}) {
  const t = window.mlTokens;
  if (kind === 'sources') {
    const sources = [
      'BBC','NPR','Reuters','AP','Bloomberg','Fox News','ESPN','TechCrunch',
      'The Guardian','Al Jazeera','Axios','The Atlantic','WSJ','FT',
      'Wired','Nature','Ars','Politico','The Verge','NYT','WaPo',
      'Turning Point','Breaking Points','National Review','Daily Wire',
      'The Hill','Newsmax','Reason','The Dispatch','Local',
    ];
    return (
      <div style={{
        position:'relative', aspectRatio:'1/1',
        borderRadius: 20, padding: 20,
        background:'linear-gradient(135deg, #FFE0B5 0%, #FFBC80 100%)',
        overflow:'hidden',
      }}>
        <div style={{position:'absolute', inset: 0, display:'grid',
          gridTemplateColumns:'repeat(4, 1fr)', gap: 8, padding: 20,
          alignContent:'center',
        }}>
          {sources.slice(0, 16).map((s,i)=>(
            <div key={i} style={{
              background:'rgba(255,253,248,0.85)',
              borderRadius: 10,
              padding: '10px 6px',
              fontSize: 11, fontWeight: 700, color: t.ink,
              textAlign:'center',
              border:'1px solid rgba(42,24,16,0.08)',
              opacity: 0.6 + (Math.random()*0.4),
              whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis',
            }}>{s}</div>
          ))}
        </div>
        <div style={{
          position:'absolute', inset: 0,
          display:'flex', alignItems:'center', justifyContent:'center',
        }}>
          <div style={{
            width: 90, height: 90, borderRadius: 999,
            background: t.coral,
            boxShadow:'0 10px 30px rgba(255,90,45,0.4), 0 0 0 12px rgba(255,255,255,0.25)',
            display:'flex', alignItems:'center', justifyContent:'center',
            color: t.cream, fontFamily: t.mono, fontSize: 11, letterSpacing:'0.15em',
            textAlign:'center', fontWeight: 700,
          }}>HAROLD<br/>READS</div>
        </div>
      </div>
    );
  }
  if (kind === 'writing') {
    const now = new Date();
    const days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
    const months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
    const dateLabel = `${days[now.getDay()].toUpperCase()} MORNING · DRAFT · ${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')} AM`;
    const greeting = `Good morning. It's ${days[now.getDay()]}, ${months[now.getMonth()]} ${now.getDate()}.`;
    return (
      <div style={{
        aspectRatio:'1/1', borderRadius: 20,
        background:'linear-gradient(160deg, #FFF3E6 0%, #FFE0B5 100%)',
        padding: 28, display:'flex', flexDirection:'column', gap: 10,
        border:'1px solid rgba(42,24,16,0.08)',
      }}>
        <div style={{fontFamily: t.mono, fontSize: 10, letterSpacing:'0.2em', color: t.ink40}}>
          {dateLabel}
        </div>
        <div style={{fontFamily: t.sans, fontSize: 16, color: t.ink, fontWeight: 600}}>
          {greeting}
        </div>
        <div style={{fontSize: 13, color: t.ink80, lineHeight: 1.6}}>
          Here's what you need to know today<span style={{
            display:'inline-block', width: 10, height: 16, background: t.coral,
            marginLeft: 2, verticalAlign:'middle', animation:'mlBlink 1s infinite',
          }}/>
        </div>
        <div style={{
          marginTop: 'auto',
          display:'flex', alignItems:'center', gap: 10,
          padding:'10px 14px', borderRadius: 999,
          background:'rgba(255,255,255,0.6)',
          border:'1px solid rgba(42,24,16,0.08)',
          alignSelf:'flex-start',
        }}>
          <span style={{width: 8, height: 8, borderRadius: 999, background: t.coral,
            boxShadow:'0 0 0 3px rgba(255,90,45,0.25)'}}/>
          <span style={{fontSize: 12, color: t.ink60, fontWeight: 600}}>
            Writing · 14 stories queued · Balance checking
          </span>
        </div>
        <div style={{
          display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 6,
        }}>
          {['World','Markets','Sports','Tech','Local','Good'].map((s,i)=>(
            <div key={i} style={{
              padding:'6px 8px', borderRadius: 8,
              background: i<4 ? t.coral : 'rgba(42,24,16,0.08)',
              color: i<4 ? t.cream : t.ink40,
              fontSize: 10, fontWeight: 700, textAlign:'center',
              letterSpacing:'0.05em',
            }}>{s}</div>
          ))}
        </div>
      </div>
    );
  }
  // sms
  const now = new Date();
  const hrs = now.getHours();
  const timeStr = `${hrs > 12 ? hrs-12 : hrs || 12}:${String(now.getMinutes()).padStart(2,'0')} ${hrs >= 12 ? 'PM' : 'AM'}`;
  return (
    <div style={{
      aspectRatio:'1/1', borderRadius: 20,
      background:'linear-gradient(160deg, #FFD4B0 0%, #FFB87A 100%)',
      padding: 28, display:'flex', flexDirection:'column',
      justifyContent:'flex-end',
      position:'relative', overflow:'hidden',
    }}>
      {/* little sun */}
      <div style={{
        position:'absolute', top: 24, right: 24,
        width: 80, height: 80, borderRadius: 999,
        background:'radial-gradient(circle, #FFE4B0, #FFB864)',
        boxShadow:'0 0 40px rgba(255,180,100,0.6)',
      }}/>
      <div style={{
        background: t.paper, borderRadius: 20,
        padding: 14, display:'flex', flexDirection:'column', gap: 10,
        boxShadow:'0 20px 40px rgba(42,24,16,0.15)',
      }}>
        <div style={{display:'flex', alignItems:'center', gap: 10}}>
          <div style={{width: 32, height:32, borderRadius: 999, background:'#FFE0B5',
            display:'flex', alignItems:'center', justifyContent:'center', fontSize: 16}}>🦉</div>
          <div style={{flex:1}}>
            <div style={{fontSize: 13, fontWeight: 700, color: t.ink}}>Harold</div>
            <div style={{fontSize: 10, color: t.ink40}}>Today {timeStr}</div>
          </div>
        </div>
        <div style={{
          background:'#FFE0B5', borderRadius:'14px 14px 14px 4px',
          padding: 12, fontSize: 12, color: t.ink, lineHeight: 1.4,
        }}>
          🌅 Good morning! Here's your briefing. Tap to listen:
        </div>
        <div style={{
          display:'flex', alignItems:'center', gap: 8,
          background:'#fff', borderRadius: 999, padding: 8,
        }}>
          <div style={{width: 28, height:28, borderRadius: 999, background: t.coral,
            display:'flex', alignItems:'center', justifyContent:'center'}}>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="white"><path d="M7 5v14l12-7z"/></svg>
          </div>
          <div style={{flex:1, display:'flex', alignItems:'center', gap: 1.5, height: 18}}>
            {Array.from({length: 22}).map((_,i)=>(
              <span key={i} style={{flex:1, background: t.coralSoft,
                height: `${30+60*Math.abs(Math.sin(i*0.9))}%`, borderRadius: 1}}/>
            ))}
          </div>
          <span style={{fontFamily: t.mono, fontSize: 10, color: t.ink40}}>4:52</span>
        </div>
      </div>
    </div>
  );
}

window.MLManifesto = MLManifesto;
window.MLHowItWorks = MLHowItWorks;