/* Sanio Hi-Fi · Landing / Übersicht
 * Hero + four cards linking to the four surfaces. Sets up the prototype context.
 */

function LandingHero({ onNavigate }) {
  return (
    <section style={{ padding: '72px 32px 32px', maxWidth: 1120, margin: '0 auto' }}>
      <div className="row middle gap-8" style={{ marginBottom: 18 }}>
        <span className="pill accent">
          <span className="dot green" />
          Klickbarer Hi-Fi Prototyp
        </span>
        <span className="pill">Solo-Energieberater · Workflow</span>
      </div>

      <h1 className="h-display" style={{ margin: 0, maxWidth: 820 }}>
        Der CRM-Assistent für Energieberater:innen,
        <span style={{ color: 'var(--ink-faint)' }}> der das Papier­kram-Zeug erledigt.</span>
      </h1>

      <p className="body" style={{ color: 'var(--ink-soft)', maxWidth: 640, marginTop: 16, fontSize: 16, lineHeight: 1.55 }}>
        Vom Telefon­erstkontakt bis zum Vor-Ort-Termin: Sanio nimmt Leads auf, verschickt
        E-Mails im Namen der Beraterin und hält das Dashboard sauber. Dieser Prototyp
        zeigt drei Sichten zum Durchklicken.
      </p>

      <div className="row gap-10" style={{ marginTop: 26 }}>
        <button className="btn accent lg" onClick={() => onNavigate('mobile')}>
          Prototyp starten <Icon name="arrowR" size={16} />
        </button>
        <button className="btn lg" onClick={() => onNavigate('dashboard')}>
          Direkt zum Dashboard
        </button>
      </div>
    </section>
  );
}

function SurfaceCard({ tag, title, desc, bullets, route, onNavigate, illustration }) {
  return (
    <button
      onClick={() => onNavigate(route)}
      style={{
        textAlign: 'left',
        background: 'var(--surface)',
        border: '1px solid var(--line)',
        borderRadius: 16,
        padding: 20,
        display: 'flex', flexDirection: 'column',
        gap: 12,
        transition: 'border-color .15s ease, transform .15s ease, box-shadow .15s ease',
        cursor: 'pointer',
        minHeight: 320,
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.borderColor = 'var(--line-3)';
        e.currentTarget.style.boxShadow = 'var(--shadow-md)';
        e.currentTarget.style.transform = 'translateY(-2px)';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.borderColor = 'var(--line)';
        e.currentTarget.style.boxShadow = 'none';
        e.currentTarget.style.transform = 'none';
      }}
    >
      <div style={{
        height: 156,
        borderRadius: 12,
        background: 'var(--surface-2)',
        border: '1px solid var(--line)',
        overflow: 'hidden',
        position: 'relative',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {illustration}
      </div>

      <div className="row middle gap-6">
        <span className="pill">{tag}</span>
      </div>
      <div>
        <div className="h-2" style={{ marginBottom: 4 }}>{title}</div>
        <div className="small muted">{desc}</div>
      </div>

      <div className="col gap-6" style={{ marginTop: 'auto' }}>
        {bullets.map((b) => (
          <div key={b} className="row middle gap-6 tiny" style={{ color: 'var(--ink-2)' }}>
            <Icon name="check" size={13} style={{ color: 'var(--accent)' }} />
            {b}
          </div>
        ))}
      </div>

      <div className="row middle between" style={{ marginTop: 4 }}>
        <span className="small" style={{ fontWeight: 600, color: 'var(--accent-ink)' }}>
          Ansehen
        </span>
        <Icon name="arrowR" size={14} style={{ color: 'var(--accent-ink)' }} />
      </div>
    </button>
  );
}

function MiniPhone() {
  return (
    <div style={{
      width: 86, height: 158,
      borderRadius: 18, background: '#1a1a1f',
      padding: 5,
      boxShadow: '0 12px 30px -6px rgba(15,17,21,0.25)',
      transform: 'rotate(-4deg)',
    }}>
      <div style={{ width: '100%', height: '100%', background: 'var(--surface)', borderRadius: 14, padding: 10, display: 'flex', flexDirection: 'column' }}>
        <div style={{ height: 5, background: 'var(--line-2)', borderRadius: 999, marginBottom: 8 }} />
        <div className="micro bold" style={{ color: 'var(--accent-ink)' }}>SCHNELLERFASSUNG</div>
        <div style={{ fontSize: 11, fontWeight: 600, marginTop: 3, marginBottom: 6 }}>Neuer Lead</div>
        <div style={{ height: 8, background: 'var(--surface-3)', borderRadius: 3, marginBottom: 4 }} />
        <div style={{ height: 8, background: 'var(--surface-3)', borderRadius: 3, width: '70%', marginBottom: 8 }} />
        <div style={{ height: 22, background: 'var(--surface-2)', border: '1px solid var(--line)', borderRadius: 4, marginBottom: 5 }} />
        <div style={{ flex: 1 }} />
        <div style={{ height: 22, background: 'var(--accent)', borderRadius: 5, color: 'white', display:'flex',alignItems:'center',justifyContent:'center',fontSize:9,fontWeight:600 }}>E-Mail senden</div>
      </div>
    </div>
  );
}

function MiniBrowser() {
  return (
    <div style={{
      width: 220, height: 138,
      borderRadius: 8, background: 'white',
      border: '1px solid var(--line-2)',
      overflow: 'hidden',
      boxShadow: '0 12px 30px -6px rgba(15,17,21,0.18)',
    }}>
      <div style={{ height: 16, background: 'var(--surface-2)', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', padding: '0 6px', gap: 3 }}>
        <span style={{ width: 5, height: 5, borderRadius: 50, background: '#ed6a5e' }} />
        <span style={{ width: 5, height: 5, borderRadius: 50, background: '#f4be4f' }} />
        <span style={{ width: 5, height: 5, borderRadius: 50, background: '#61c554' }} />
      </div>
      <div style={{ display: 'flex', height: 'calc(100% - 16px)' }}>
        <div style={{ width: 40, borderRight: '1px solid var(--line)', background: 'var(--surface-2)', padding: 6 }}>
          <div style={{ width: 16, height: 16, borderRadius: 4, background: 'var(--accent)', marginBottom: 6 }} />
          <div style={{ height: 4, background: 'var(--surface-3)', borderRadius: 2, marginBottom: 4 }} />
          <div style={{ height: 4, background: 'var(--surface-3)', borderRadius: 2, marginBottom: 4 }} />
          <div style={{ height: 4, background: 'var(--surface-3)', borderRadius: 2 }} />
        </div>
        <div style={{ flex: 1, padding: 8, display: 'flex', gap: 4 }}>
          {[3,2,4,1,2].map((n, i) => (
            <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 3 }}>
              <div style={{ height: 4, background: 'var(--ink-faint)', borderRadius: 2, marginBottom: 1 }} />
              {Array.from({ length: n }).map((_, j) => (
                <div key={j} style={{ height: 18, background: i === 1 ? 'var(--accent-soft)' : 'var(--surface)', border: '1px solid var(--line)', borderRadius: 3 }} />
              ))}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function MiniEmail() {
  return (
    <div style={{
      width: 200, height: 138,
      borderRadius: 8, background: 'white',
      border: '1px solid var(--line-2)',
      padding: 10,
      display: 'flex', flexDirection: 'column', gap: 6,
      boxShadow: '0 12px 30px -6px rgba(15,17,21,0.18)',
      transform: 'rotate(2deg)',
    }}>
      <div className="row middle gap-6">
        <div className="avatar sm" style={{ width: 18, height: 18, fontSize: 8 }}>FS</div>
        <div style={{ flex: 1 }}>
          <div style={{ height: 4, background: 'var(--ink-2)', borderRadius: 2, width: '50%', marginBottom: 2 }} />
          <div style={{ height: 3, background: 'var(--line-2)', borderRadius: 2, width: '70%' }} />
        </div>
      </div>
      <div style={{ height: 6, background: 'var(--ink-2)', borderRadius: 2, width: '80%' }} />
      <div style={{ height: 3, background: 'var(--line-2)', borderRadius: 2 }} />
      <div style={{ height: 3, background: 'var(--line-2)', borderRadius: 2 }} />
      <div style={{ height: 3, background: 'var(--line-2)', borderRadius: 2, width: '85%' }} />
      <div style={{ height: 18, background: 'var(--accent)', borderRadius: 4, marginTop: 'auto', width: 90 }} />
    </div>
  );
}

function MiniOverview() {
  return (
    <div style={{ position: 'relative', width: 120, height: 120 }}>
      <div style={{
        position: 'absolute', inset: 0,
        borderRadius: 16,
        border: '1.5px dashed var(--line-3)',
      }} />
      <div style={{
        position: 'absolute', top: 14, left: 14, width: 36, height: 36, borderRadius: 8,
        background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'white', fontWeight: 700, fontSize: 18,
      }}>S</div>
      <div style={{
        position: 'absolute', top: 14, right: 14, height: 8, background: 'var(--surface-3)', borderRadius: 4, width: 48,
      }} />
      <div style={{
        position: 'absolute', top: 30, right: 14, height: 4, background: 'var(--line-2)', borderRadius: 2, width: 36,
      }} />
      <div style={{
        position: 'absolute', bottom: 14, left: 14, right: 14,
        height: 50, background: 'var(--surface-2)', border: '1px solid var(--line)', borderRadius: 8,
      }} />
    </div>
  );
}

function LandingGrid({ onNavigate }) {
  return (
    <section style={{ padding: '0 32px 56px', maxWidth: 1120, margin: '0 auto' }}>
      <div className="row middle between" style={{ marginBottom: 16 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 4 }}>Prototyp-Sichten</div>
          <div className="h-1">Drei Sichten, ein Workflow.</div>
        </div>
        <div className="small muted">
          Persona: <b style={{ color: 'var(--ink)' }}>Franziska Seitz</b>, Solo-Energie­beraterin in München
        </div>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gap: 16,
      }}>
        <SurfaceCard
          tag="📱 Mobile · 11 Screens"
          title="Mobile App"
          desc="Quick-Capture im Telefonat + Kundenformular für den Erstkontakt (Endkunden-Sicht)."
          bullets={[
            'Lead in 20 Sek. erfasst',
            '8-Schritt Formular, durchklickbar',
            'Mit iPhone-Frame'
          ]}
          route="mobile"
          onNavigate={onNavigate}
          illustration={<MiniPhone />}
        />
        <SurfaceCard
          tag="🖥 Desktop · 3 Sichten"
          title="Berater-Dashboard"
          desc="Kanban-Pipeline, Lead-Drawer mit allen Infos, Einstellungen für Branding & Vorlagen."
          bullets={[
            '18 echte Demo-Leads',
            'Drawer öffnet beim Klick',
            'Profil-Einstellungen'
          ]}
          route="dashboard"
          onNavigate={onNavigate}
          illustration={<MiniBrowser />}
        />
        <SurfaceCard
          tag="✉ E-Mail · 4 Templates"
          title="Auto-E-Mails"
          desc="Templates, die Sanio im Namen der Beraterin schickt. Mit Gmail-Preview oder als Reinform."
          bullets={[
            '4 Mail-Templates',
            'Gmail-Preview umschaltbar',
            '„powered by Sanio"-Footer'
          ]}
          route="emails"
          onNavigate={onNavigate}
          illustration={<MiniEmail />}
        />
      </div>

      <div className="card" style={{
        marginTop: 28, padding: 20,
        display: 'flex', gap: 24, alignItems: 'center',
      }}>
        <div style={{ flex: 1 }}>
          <div className="eyebrow" style={{ marginBottom: 6 }}>So liest sich der Prototyp</div>
          <div className="h-3" style={{ marginBottom: 4 }}>Happy-Path klickbar.</div>
          <div className="small muted" style={{ maxWidth: 560 }}>
            Die Hauptroute jeder Sicht ist durchklickbar — Buttons mit Punkt-Marker
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, margin: '0 4px' }}>
              <span className="dot green" /> </span>
            sind aktiv. Neben­pfade (alternative Optionen, Filter, Editor) sind statisch. Eingaben
            werden für die Demo nicht gespeichert.
          </div>
        </div>
        <div className="row gap-8">
          <button className="btn" onClick={() => onNavigate('mobile')}>
            <Icon name="phone" size={14} /> Mobile
          </button>
          <button className="btn" onClick={() => onNavigate('dashboard')}>
            <Icon name="grid" size={14} /> Dashboard
          </button>
          <button className="btn" onClick={() => onNavigate('emails')}>
            <Icon name="mail" size={14} /> E-Mails
          </button>
        </div>
      </div>
    </section>
  );
}

function LandingView({ onNavigate }) {
  return (
    <div className="fade-up" style={{ minHeight: 'calc(100vh - 60px)', background: 'var(--bg)' }}>
      <LandingHero onNavigate={onNavigate} />
      <LandingGrid onNavigate={onNavigate} />
    </div>
  );
}

window.LandingView = LandingView;