// PhoneMockupHero — light-mode, travel-photo-rich, matches user's reference
// Shows: header, Patrimônio (blurred), Próximas Viagens with photographic cards, AI callout, bottom nav

const Ico = ({ name, size = 16, color, strokeWidth = 1.75, style = {} }) => (
  <i data-lucide={name} style={{ width: size, height: size, color, strokeWidth, display: 'inline-flex', ...style }}></i>
);

// SVG city scenes (CSS-art photography substitute)
function NovaYorkScene() {
  return (
    <svg viewBox="0 0 320 180" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
      <defs>
        <linearGradient id="nysky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#FFD8B8" />
          <stop offset="40%" stopColor="#FFB489" />
          <stop offset="80%" stopColor="#D4818E" />
          <stop offset="100%" stopColor="#7C5C8C" />
        </linearGradient>
        <linearGradient id="nywater" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#5A6F8A" />
          <stop offset="100%" stopColor="#3D4F66" />
        </linearGradient>
      </defs>
      {/* sky */}
      <rect width="320" height="180" fill="url(#nysky)" />
      {/* sun */}
      <circle cx="220" cy="68" r="22" fill="#FFE3B0" opacity="0.85" />
      {/* far skyline */}
      <path d="M0,120 L18,115 L20,108 L30,108 L32,118 L48,116 L52,100 L62,100 L64,90 L72,90 L74,108 L92,108 L96,95 L108,95 L110,85 L122,85 L124,108 L140,108 L142,98 L152,98 L156,108 L172,108 L176,82 L188,82 L192,108 L210,108 L214,90 L226,90 L228,108 L246,108 L250,98 L262,98 L266,108 L284,108 L288,88 L300,88 L304,108 L320,108 L320,120 Z"
        fill="#3D2B4F" opacity="0.6" />
      {/* near skyline */}
      <path d="M0,140 L0,128 L18,128 L22,118 L34,118 L38,130 L52,128 L56,120 L70,120 L74,130 L88,128 L92,116 L106,116 L110,130 L124,128 L128,122 L142,122 L146,130 L162,130 L166,118 L180,118 L184,130 L200,128 L204,124 L218,124 L222,130 L240,128 L244,120 L260,120 L264,130 L284,128 L288,124 L302,124 L306,130 L320,128 L320,140 Z"
        fill="#241730" />
      {/* statue of liberty silhouette */}
      <g transform="translate(82, 84)" fill="#1A1024">
        {/* pedestal */}
        <rect x="-8" y="36" width="16" height="6" />
        <rect x="-10" y="42" width="20" height="14" />
        {/* body */}
        <path d="M-4,36 L-5,16 L-7,12 L-3,8 L0,4 L3,8 L7,12 L5,16 L4,36 Z" />
        {/* head */}
        <circle cx="0" cy="2" r="2.5" />
        {/* crown */}
        <path d="M-3,0 L-3,-2 L-2,-1 L-1,-3 L0,-2 L1,-3 L2,-1 L3,-2 L3,0 Z" />
        {/* torch arm */}
        <path d="M0,8 L8,-2 L9,-8 L10,-8 L9,-2 L1,9 Z" />
        <circle cx="9.5" cy="-9" r="1.5" fill="#FFD27A" />
      </g>
      {/* water */}
      <rect x="0" y="140" width="320" height="40" fill="url(#nywater)" />
      {/* water shimmer */}
      <line x1="20" y1="148" x2="60" y2="148" stroke="#FFFFFF" strokeOpacity="0.18" strokeWidth="1" />
      <line x1="120" y1="155" x2="180" y2="155" stroke="#FFFFFF" strokeOpacity="0.15" strokeWidth="1" />
      <line x1="220" y1="162" x2="280" y2="162" stroke="#FFFFFF" strokeOpacity="0.12" strokeWidth="1" />
    </svg>
  );
}

function SantiagoScene() {
  return (
    <svg viewBox="0 0 320 180" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
      <defs>
        <linearGradient id="scsky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#FFB97A" />
          <stop offset="50%" stopColor="#F88060" />
          <stop offset="100%" stopColor="#7C3A6A" />
        </linearGradient>
      </defs>
      <rect width="320" height="180" fill="url(#scsky)" />
      <circle cx="240" cy="74" r="26" fill="#FFE5B8" opacity="0.9" />
      {/* Andes mountains */}
      <path d="M0,180 L0,120 L25,80 L45,95 L70,55 L95,75 L115,60 L140,90 L165,50 L185,75 L210,65 L235,85 L260,55 L285,80 L320,60 L320,180 Z" fill="#5C2240" />
      <path d="M0,180 L0,140 L35,115 L55,130 L82,110 L110,135 L138,118 L165,140 L195,115 L220,135 L250,120 L280,140 L320,125 L320,180 Z" fill="#2E0F26" />
      {/* foreground city lights hint */}
      <g fill="#FFD27A" opacity="0.7">
        <circle cx="40" cy="155" r="0.8" />
        <circle cx="80" cy="160" r="0.8" />
        <circle cx="120" cy="158" r="0.8" />
        <circle cx="180" cy="162" r="0.8" />
        <circle cx="240" cy="158" r="0.8" />
        <circle cx="280" cy="162" r="0.8" />
      </g>
    </svg>
  );
}

function LisboaScene() {
  return (
    <svg viewBox="0 0 320 180" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
      <defs>
        <linearGradient id="lxsky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#FFD9A0" />
          <stop offset="100%" stopColor="#F4A878" />
        </linearGradient>
        <pattern id="azulejo" width="20" height="20" patternUnits="userSpaceOnUse">
          <rect width="20" height="20" fill="#F4E9C4" />
          <path d="M10,0 L20,10 L10,20 L0,10 Z" fill="#3A6B9C" opacity="0.4" />
          <circle cx="10" cy="10" r="2" fill="#F4E9C4" />
        </pattern>
      </defs>
      <rect width="320" height="180" fill="url(#lxsky)" />
      {/* hill silhouette */}
      <path d="M0,180 L0,90 L40,75 L80,82 L120,68 L160,76 L200,62 L240,72 L280,65 L320,80 L320,180 Z" fill="#8A4520" />
      {/* yellow buildings */}
      <g fill="#E8C780">
        <rect x="20" y="100" width="30" height="60" />
        <rect x="55" y="95" width="22" height="65" />
        <rect x="82" y="105" width="28" height="55" />
        <rect x="115" y="92" width="26" height="68" />
        <rect x="146" y="98" width="32" height="62" />
        <rect x="183" y="88" width="24" height="72" />
        <rect x="212" y="100" width="28" height="60" />
        <rect x="245" y="94" width="30" height="66" />
        <rect x="280" y="100" width="30" height="60" />
      </g>
      {/* orange roofs */}
      <g fill="#C45A2A">
        <path d="M20,100 L35,92 L50,100 Z" />
        <path d="M55,95 L66,89 L77,95 Z" />
        <path d="M82,105 L96,98 L110,105 Z" />
        <path d="M115,92 L128,86 L141,92 Z" />
        <path d="M146,98 L162,91 L178,98 Z" />
        <path d="M183,88 L195,82 L207,88 Z" />
        <path d="M212,100 L226,93 L240,100 Z" />
        <path d="M245,94 L260,88 L275,94 Z" />
        <path d="M280,100 L295,93 L310,100 Z" />
      </g>
      {/* windows */}
      <g fill="#2A1F1A" opacity="0.8">
        <rect x="26" y="115" width="4" height="6" />
        <rect x="36" y="115" width="4" height="6" />
        <rect x="26" y="130" width="4" height="6" />
        <rect x="36" y="130" width="4" height="6" />
        <rect x="60" y="110" width="3" height="5" />
        <rect x="68" y="110" width="3" height="5" />
        <rect x="60" y="125" width="3" height="5" />
        <rect x="68" y="125" width="3" height="5" />
        <rect x="88" y="120" width="4" height="6" />
        <rect x="98" y="120" width="4" height="6" />
        <rect x="120" y="108" width="4" height="6" />
        <rect x="132" y="108" width="4" height="6" />
        <rect x="152" y="112" width="4" height="6" />
        <rect x="166" y="112" width="4" height="6" />
        <rect x="188" y="100" width="3" height="5" />
        <rect x="198" y="100" width="3" height="5" />
        <rect x="218" y="115" width="3" height="5" />
        <rect x="228" y="115" width="3" height="5" />
        <rect x="252" y="108" width="4" height="6" />
        <rect x="264" y="108" width="4" height="6" />
        <rect x="285" y="115" width="4" height="6" />
        <rect x="297" y="115" width="4" height="6" />
      </g>
    </svg>
  );
}

function PhoneMockupHero() {
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, []);

  return (
    <div className="iphone-hero">
      <div className="iphone-frame">
        <div className="iphone-notch"></div>
        <div className="iphone-screen">
          {/* status bar */}
          <div className="ip-status">
            <span>13:08</span>
            <div className="ip-status-right">
              <Ico name="bell-off" size={12} color="#0a0a0a" />
              <Ico name="signal" size={13} color="#0a0a0a" />
              <Ico name="wifi" size={13} color="#0a0a0a" />
              <Ico name="battery-full" size={17} color="#0a0a0a" />
            </div>
          </div>

          {/* app header */}
          <div className="ip-header">
            <div className="ip-brand">
              <div className="ip-compass">
                <svg viewBox="0 0 100 100" width="36" height="36">
                  <circle cx="50" cy="50" r="42" stroke="#0891a8" strokeWidth="3" fill="none" />
                  <circle cx="50" cy="50" r="35" stroke="#14b8a6" strokeWidth="1.5" fill="none" />
                  <circle cx="50" cy="50" r="32" fill="#0F1F2A" />
                  <line x1="50" y1="20" x2="50" y2="80" stroke="#0f5f7a" strokeWidth="1" />
                  <line x1="20" y1="50" x2="80" y2="50" stroke="#0f5f7a" strokeWidth="1" />
                  <path d="M50 25 L56 40 L50 36 L44 40 Z" fill="#14b8a6" />
                  <text x="50" y="22" textAnchor="middle" fontFamily="sans-serif" fontSize="9" fontWeight="bold" fill="#14b8a6">N</text>
                  <path d="M44 50 L50 44 L56 50 L50 60 Z" fill="#14b8a6" />
                  <path d="M50 60 L46 70 M50 60 L54 70" stroke="#14b8a6" strokeWidth="2" strokeLinecap="round" />
                </svg>
              </div>
              <div>
                <div className="ip-greet">Olá, Fernando</div>
                <div className="ip-date">Sábado, 16 De Maio</div>
              </div>
            </div>
            <div className="ip-h-right">
              <div className="ip-bell">
                <Ico name="bell" size={20} color="#0a0a0a" strokeWidth={1.75} />
                <span className="ip-badge">9+</span>
              </div>
              <div className="ip-avatars">
                <div className="ip-av" style={{ background: 'linear-gradient(135deg, #FFD27A, #E08A4F)' }}></div>
                <div className="ip-av" style={{ background: 'linear-gradient(135deg, #94B8D6, #486B91)' }}></div>
              </div>
            </div>
          </div>

          {/* Patrimônio card */}
          <div className="ip-section">
            <div className="ip-patrim">
              <div className="ip-patrim-head">
                <div className="ip-p-label">
                  <Ico name="wallet" size={15} color="#5A5A5A" strokeWidth={2} />
                  <span>Patrimônio</span>
                </div>
                <Ico name="eye" size={16} color="#9A9A9A" strokeWidth={1.75} />
              </div>
              <div className="ip-patrim-amt"></div>
              <div className="ip-patrim-amt-2"></div>
              <div className="ip-patrim-sub">4 contas conectadas</div>
              <div className="ip-patrim-foot">
                <div className="ip-pf-item">
                  <Ico name="trending-up" size={13} color="#10B981" strokeWidth={2.25} />
                  <span className="lbl">A receber</span>
                  <span className="val val-up"></span>
                </div>
                <div className="ip-pf-item">
                  <Ico name="trending-down" size={13} color="#EF4444" strokeWidth={2.25} />
                  <span className="lbl">A pagar</span>
                  <span className="val val-dn"></span>
                </div>
              </div>
            </div>

            {/* Próximas Viagens */}
            <div className="ip-sec-head">
              <span>Próximas Viagens</span>
              <span className="ip-ver">Ver todos <Ico name="chevron-right" size={11} color="#0a0a0a" strokeWidth={2.25} /></span>
            </div>

            <div className="ip-trip">
              <div className="ip-trip-photo"><NovaYorkScene /></div>
              <div className="ip-trip-overlay">
                <span className="ip-trip-badge">Em 25 dias</span>
                <div className="ip-trip-bottom">
                  <div className="ip-trip-name">Nova York</div>
                  <div className="ip-trip-meta">10–14 Jun  ·  4 dias</div>
                </div>
              </div>
            </div>

            <div className="ip-trip-mini">
              <div className="ip-trip-mini-img"><SantiagoScene /></div>
              <div className="ip-trip-mini-meta">
                <div className="ip-trip-mini-name">Santiago</div>
                <div className="ip-trip-mini-sub">22–26 Jul</div>
              </div>
              <span className="ip-trip-mini-badge">Em 67 dias</span>
            </div>

            {/* AI callout */}
            <div className="ip-ai-tag">
              <Ico name="sparkles" size={12} color="#F97316" strokeWidth={2.25} />
              <span>SUAS PRÓXIMAS VIAGENS</span>
            </div>
            <div className="ip-ai-title">Prepare-se para Nova York</div>

            <div className="ip-ai-card">
              <NovaYorkScene />
              <div className="ip-ai-overlay">
                <div className="ip-ai-faltam">FALTAM 25 DIAS</div>
                <div className="ip-ai-dest">
                  Nova York
                  <span className="ip-ai-pin">
                    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="M2 12h20M12 2a15.3 15.3 0 0 1 0 20M12 2a15.3 15.3 0 0 0 0 20" /></svg>
                  </span>
                </div>
                <div className="ip-ai-pills">
                  <span><Ico name="ticket" size={10} color="#fff" strokeWidth={2} /> Tours</span>
                  <span><Ico name="map" size={10} color="#fff" strokeWidth={2} /> Atrações</span>
                  <span><Ico name="utensils" size={10} color="#fff" strokeWidth={2} /> Food</span>
                </div>
                <div className="ip-ai-cta">
                  Descobrir experiências
                  <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: 4 }}><path d="M5 12h14M13 6l6 6-6 6" /></svg>
                </div>
              </div>
            </div>
          </div>

          {/* bottom nav */}
          <div className="ip-nav">
            {[
              { i: 'home', l: 'Início', a: true },
              { i: 'calendar-days', l: 'Agenda' },
              { i: 'plane', l: 'Viagens' },
              { i: 'wallet', l: 'Finanças' },
              { i: 'settings', l: 'Ajustes' },
            ].map((nav, idx) => (
              <div key={idx} className={`ip-nav-item ${nav.a ? 'active' : ''}`}>
                <Ico name={nav.i} size={20} color={nav.a ? '#0a0a0a' : '#9A9A9A'} strokeWidth={nav.a ? 2.5 : 1.75} />
                <span>{nav.l}</span>
              </div>
            ))}
          </div>

          {/* home indicator */}
          <div className="ip-home"></div>
        </div>
      </div>
    </div>
  );
}

window.PhoneMockupHero = PhoneMockupHero;
window.NovaYorkScene = NovaYorkScene;
window.SantiagoScene = SantiagoScene;
window.LisboaScene = LisboaScene;