// Home — hero, info cards, button grid, DJ Malik section, childhood cutout
const { useEffect: useEffectHome } = React;

function Home({ go, openModal }) {
  return (
    <div style={homeStyles.wrap}>
      {/* Top bar */}
      <div style={homeStyles.topbar}>
        <div className="label-sm" style={{ opacity: 0.7 }}>B & E</div>
        <div className="label-sm" style={{ opacity: 0.7 }}>27.06.2026</div>
      </div>

      {/* Hero */}
      <div style={homeStyles.hero}>
        <div className="hand" style={homeStyles.heroName}>
          beyza
          <span className="hand" style={homeStyles.amp}> &amp; </span>
          emin
        </div>
        <p className="micro" style={{ margin: '14px 0 0', opacity: 0.85, letterSpacing: '0.16em', fontFamily: "\"DM Sans\"" }}>
          Sizi de aramızda görmekten mutluluk duyarız.
        </p>
      </div>

      {/* Hero scribbles */}
      <Squiggle />

      {/* Info cards */}
      <section style={homeStyles.section}>
        <div style={homeStyles.sectionHead}>
          <span className="label">Programımız</span>
          <span className="label" style={{ opacity: 0.55 }}>02 ana etkinlik</span>
        </div>

        <InfoCard
          kicker="01 · Nikah"
          title="Üsküdar Belediyesi"
          subtitle="Evlendirme Dairesi · Salon 1 · Kat 1"
          time="25 Haziran · Perşembe"
          hour="14:00"
          onDirections={() => openModal('directions-nikah')} />
        

        <div style={{ height: 14 }} />

        <InfoCard
          kicker="02 · Düğün"
          title="Çamlıköşk"
          subtitle="Fatih Sultan Mehmet Mesire Alanı · Ümraniye"
          time="27 Haziran · Cumartesi"
          hour="19:00"
          highlight
          onDirections={() => openModal('directions-dugun')} />
        
      </section>

      {/* Button grid */}
      <section style={{ ...homeStyles.section, paddingTop: 6 }}>
        <div style={homeStyles.sectionHead}>
          <span className="label">Bu Sitede</span>
          <span className="label" style={{ opacity: 0.55 }}>Her şey var</span>
        </div>

        <div style={homeStyles.grid}>
          <Tile label="Yol Tarifi" sub="Nikah & düğün" icon={<Icons.Pin size={22} />} onClick={() => go('directions')} />
          <Tile label="Foto Yükle" sub="O an, sen çek" icon={<Icons.Upload size={22} />} onClick={() => go('upload')} />
          <Tile label="Masa Düzeni" sub="Yerini bul" icon={<Icons.Table size={22} />} onClick={() => go('tables')} />
          <Tile label="Pınar'ın Kadrajı" sub="Fotoğrafçımız" icon={<Icons.Camera size={22} />} onClick={() => go('pinar')} />
          <Tile label="Misafir Galerisi" sub="Sizin gözünüzden" icon={<Icons.Gallery size={22} />} onClick={() => go('guest-photos')} />
          <Tile label="Oyunlar" sub="Düğünde 4 oyun" icon={<Icons.Game size={22} />} onClick={() => go('games')} />
          <Tile label="Quiz" sub="Bizi ne kadar tanıyorsun?" icon={<Icons.Quiz size={22} />} onClick={() => go('quiz')} wide />
        </div>
      </section>

      {/* DJ Malik feature */}
      <section style={{ ...homeStyles.section, paddingTop: 6 }}>
        <div style={homeStyles.sectionHead}>
          <span className="label">DJ Booth</span>
          <span className="label" style={{ opacity: 0.55 }}>Yeğen power</span>
        </div>
        <DjMalikCard onPlaylist={() => go('dj')} />
      </section>

      {/* Childhood cutout */}
      <section style={{ ...homeStyles.section, paddingTop: 6 }}>
        <div style={homeStyles.sectionHead}>
          <span className="label">O Zamanlar</span>
          <span className="label" style={{ opacity: 0.55 }}>Birbirimizi bilmeden</span>
        </div>
        <ChildhoodCutout />
      </section>

      {/* Footer */}
      <footer style={homeStyles.footer}>
        <div className="hand" style={{ fontSize: 38, lineHeight: 1, color: 'var(--pink)', margin: '0 0 10px' }}>
          görüşürüz ♡
        </div>
        <div className="label-sm" style={{ opacity: 0.7 }}>GÜRDOĞAN · İMAMOĞLU AİLELERİ</div>
        <div className="label-sm" style={{ opacity: 0.45, marginTop: 6 }}>BEYZA-EMİN.COM</div>
      </footer>
    </div>);

}

/* ---------- Sub-pieces ---------- */

function InfoCard({ kicker, title, subtitle, time, hour, highlight, onDirections }) {
  return (
    <div style={{
      ...homeStyles.infoCard,
      background: highlight ? 'var(--pink)' : 'transparent',
      color: highlight ? 'var(--burgundy)' : 'var(--pink)',
      borderColor: highlight ? 'transparent' : 'rgba(255,185,201,0.35)'
    }}>
      <div className="label" style={{ opacity: highlight ? 0.65 : 0.7 }}>{kicker}</div>
      <div className="hand" style={{ fontSize: 38, lineHeight: 1, margin: '8px 0 4px' }}>{title}</div>
      <div className="body-sm" style={{ opacity: 0.85, marginBottom: 14 }}>{subtitle}</div>

      <div style={homeStyles.infoFooter(highlight)}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Icons.Cal size={16} />
          <span className="label-sm">{time}</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Icons.Clock size={16} />
          <span className="label-sm">{hour}</span>
        </div>
      </div>

      <button onClick={onDirections} style={{
        ...homeStyles.dirBtn,
        background: highlight ? 'var(--burgundy)' : 'var(--pink)',
        color: highlight ? 'var(--pink)' : 'var(--burgundy)'
      }}>
        <Icons.Pin size={16} />
        <span className="label">Yol Tarifi Al</span>
      </button>
    </div>);

}

function Tile({ label, sub, icon, onClick, wide }) {
  return (
    <button onClick={onClick} style={{
      ...homeStyles.tile,
      gridColumn: wide ? 'span 2' : 'span 1',
      paddingRight: wide ? 18 : 16
    }}>
      <div style={homeStyles.tileIcon}>{icon}</div>
      <div style={{ textAlign: 'left', flex: 1, minWidth: 0 }}>
        <div className="hand" style={{ fontSize: wide ? 26 : 22, lineHeight: 1, marginBottom: 2 }}>{label}</div>
        <div className="label-sm" style={{ opacity: 0.6, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{sub}</div>
      </div>
      <Icons.Arrow size={18} />
    </button>);

}

function DjMalikCard({ onPlaylist }) {
  return (
    <div style={homeStyles.djCard}>
      <div style={homeStyles.djPhoto}>
        {/* Placeholder DJ portrait */}
        <DjPortraitPlaceholder />
        <div style={homeStyles.djTag}>
          <div className="label-sm" style={{ color: 'var(--burgundy)' }}>YEĞEN</div>
        </div>
      </div>

      <div style={{ padding: '18px 18px 20px' }}>
        <div className="label" style={{ opacity: 0.7 }}>Setimiz</div>
        <div className="hand" style={{ fontSize: 42, lineHeight: 1, margin: '6px 0 2px' }}>dj malik</div>
        <div className="body-sm" style={{ opacity: 0.82, margin: '4px 0 14px' }}>
          Beyza'nın 11 yaşındaki yeğeni. Şu an süper. Akşam tutulamaz olacak.
        </div>

        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 16 }}>
          <Chip>2010'lar pop</Chip>
          <Chip>türkçe rap</Chip>
          <Chip>düğün klasikleri</Chip>
          <Chip>+18 sonrası ✷</Chip>
        </div>

        <button onClick={onPlaylist} style={homeStyles.playlistBtn}>
          <Icons.Music size={18} />
          <span className="label">Setlisti Aç</span>
          <Icons.Arrow size={16} />
        </button>
      </div>
    </div>);

}

function Chip({ children }) {
  return (
    <span style={{
      padding: '7px 12px',
      borderRadius: 999,
      border: '1px solid rgba(255,185,201,0.4)',
      fontSize: 11,
      letterSpacing: '0.04em',
      fontFamily: "'Manrope',sans-serif",
      opacity: 0.92
    }}>{children}</span>);

}

function DjPortraitPlaceholder() {
  // Gradient placeholder portrait — user can swap with real photo later
  return (
    <div style={{
      width: '100%',
      aspectRatio: '4 / 3',
      position: 'relative',
      background:
      'linear-gradient(135deg, #FFD7DE 0%, #FFB9C9 40%, #E58AA0 100%)',
      overflow: 'hidden'
    }}>
      {/* Suggested silhouette */}
      <svg viewBox="0 0 400 300" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="dj-grad" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#962840" stopOpacity="0" />
            <stop offset="100%" stopColor="#962840" stopOpacity="0.55" />
          </linearGradient>
        </defs>
        {/* Headphones + head silhouette */}
        <g fill="#962840" opacity="0.85">
          <circle cx="200" cy="170" r="62" />
          <rect x="160" y="225" width="80" height="80" rx="20" />
          <path d="M138 168 a62 62 0 0 1 124 0" fill="none" stroke="#962840" strokeWidth="14" strokeLinecap="round" />
          <rect x="128" y="160" width="22" height="34" rx="8" />
          <rect x="250" y="160" width="22" height="34" rx="8" />
        </g>
        <rect x="0" y="0" width="400" height="300" fill="url(#dj-grad)" />
      </svg>
      <div style={{
        position: 'absolute',
        bottom: 10, left: 12,
        fontFamily: "'Manrope',sans-serif",
        fontSize: 9,
        letterSpacing: '0.2em',
        textTransform: 'uppercase',
        color: 'rgba(150,40,64,0.85)',
        background: 'rgba(255,255,255,0.5)',
        padding: '3px 8px',
        borderRadius: 999
      }}>FOTOĞRAF YERİ</div>
    </div>);

}

function ChildhoodCutout() {
  return (
    <div style={{
      position: 'relative',
      borderRadius: 24,
      overflow: 'hidden',
      border: '1px solid rgba(255,185,201,0.25)',
      padding: '22px 22px 18px',
      background: 'rgba(255,185,201,0.06)'
    }}>
      {/* Decorative scribble */}
      <svg width="120" height="40" viewBox="0 0 120 40" style={{ position: 'absolute', top: -8, right: 18, opacity: 0.5 }}>
        <path d="M2 25 Q 20 5, 40 22 T 80 18 T 118 22" stroke="var(--pink)" strokeWidth="2" fill="none" strokeLinecap="round" />
      </svg>

      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14 }}>
        <div style={{
          background: '#fff',
          padding: '10px 10px 38px',
          boxShadow: '0 16px 30px -10px rgba(0,0,0,0.35), 0 2px 0 rgba(0,0,0,0.05)',
          transform: 'rotate(-3deg)',
          borderRadius: 4,
          width: '58%',
          flexShrink: 0,
          position: 'relative'
        }}>
          <img src="assets/childhood-cutout.png" alt="Beyza & Emin çocukluk" style={{
            width: '100%',
            display: 'block',
            borderRadius: 2
          }} />
          <div style={{
            position: 'absolute',
            bottom: 8, left: 0, right: 0,
            textAlign: 'center',
            color: '#962840',
            fontFamily: "'Permanent Marker',cursive",
            fontSize: 16,
            lineHeight: 1
          }}>~1998</div>
        </div>

        <div style={{ flex: 1, paddingBottom: 8 }}>
          <div className="hand" style={{ fontSize: 32, lineHeight: 0.95, marginBottom: 8 }}>çok küçük<br />çok kankaydık</div>
          <div className="body-sm" style={{ opacity: 0.78 }}>
            Aynı sokakta büyüdük. 28 yıl sonra hâlâ aynı sokağa dönüyoruz, bu kez sizinle.
          </div>
        </div>
      </div>
    </div>);

}

function Squiggle() {
  return (
    <svg width="100%" height="36" viewBox="0 0 380 36" style={{ display: 'block', marginBottom: -6, marginTop: -6, opacity: 0.85 }}>
      <path d="M10 18 Q 35 4, 60 18 T 110 18 T 160 18 T 210 18 T 260 18 T 310 18 T 370 18"
      stroke="var(--pink)" strokeWidth="2.2" fill="none" strokeLinecap="round" />
    </svg>);

}

const homeStyles = {
  wrap: { paddingBottom: 40 },
  topbar: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    padding: '22px 24px 0'
  },
  hero: {
    padding: '42px 24px 18px',
    textAlign: 'left'
  },
  heroName: {
    fontSize: 78,
    lineHeight: 0.9,
    color: 'var(--pink)',
    letterSpacing: '0.005em'
  },
  amp: {
    fontSize: 64,
    display: 'inline'
  },
  section: {
    padding: '30px 20px 14px'
  },
  sectionHead: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    padding: '0 4px 16px'
  },
  infoCard: {
    border: '1.5px solid rgba(255,185,201,0.35)',
    borderRadius: 22,
    padding: '20px 20px 18px',
    position: 'relative'
  },
  infoFooter: (h) => ({
    display: 'flex', justifyContent: 'space-between',
    paddingTop: 14,
    borderTop: `1px solid ${h ? 'rgba(150,40,64,0.2)' : 'rgba(255,185,201,0.25)'}`,
    marginBottom: 16
  }),
  dirBtn: {
    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    width: '100%',
    padding: '12px 14px',
    borderRadius: 999
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: 10
  },
  tile: {
    display: 'flex', alignItems: 'center', gap: 12,
    padding: '14px 14px 14px 14px',
    border: '1.5px solid rgba(255,185,201,0.3)',
    borderRadius: 18,
    color: 'var(--pink)',
    background: 'rgba(255,185,201,0.04)',
    transition: 'background 0.2s, transform 0.1s',
    textAlign: 'left'
  },
  tileIcon: {
    width: 38, height: 38,
    borderRadius: 12,
    background: 'var(--pink)',
    color: 'var(--burgundy)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexShrink: 0
  },
  djCard: {
    borderRadius: 22,
    overflow: 'hidden',
    background: 'rgba(255,185,201,0.06)',
    border: '1px solid rgba(255,185,201,0.25)'
  },
  djPhoto: {
    position: 'relative'
  },
  djTag: {
    position: 'absolute',
    top: 14, left: 14,
    background: 'var(--pink)',
    padding: '5px 10px',
    borderRadius: 999
  },
  playlistBtn: {
    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
    width: '100%',
    padding: '14px 16px',
    borderRadius: 999,
    background: 'var(--pink)',
    color: 'var(--burgundy)'
  },
  footer: {
    padding: '40px 24px 30px',
    textAlign: 'center',
    borderTop: '1px solid rgba(255,185,201,0.18)',
    marginTop: 30
  }
};

window.Home = Home;