// Shared UI primitives + Hero (editorial) + Stats + About — balanced compact

function TickDivider({ label, ticks = "◦ ◦ ◦" }) {
  return (
    <div className="tick-divider" style={{ margin: '0 auto' }}>
      <span className="ticks">{ticks}</span>
      {label && <span>{label}</span>}
      <span className="ticks">{ticks}</span>
    </div>
  );
}

function SectionLabel({ children, num }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 18 }}>
      <span className="section-label">{children}</span>
    </div>
  );
}

function Avatar({ dark, size = 100 }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        width: size, height: size,
        borderRadius: '50%',
        overflow: 'hidden',
        position: 'relative',
        flexShrink: 0,
        border: '2px solid var(--line)',
        boxShadow: dark ? '0 8px 28px rgba(194,106,10,0.18)' : '0 8px 20px rgba(0,0,0,0.06)',
        transition: 'box-shadow 0.4s ease',
        cursor: 'pointer',
      }}>
      {/* Normal photos */}
      <img src="assets/photo-light.png" alt="Edan Corleto"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%', opacity: hovered ? 0 : (dark ? 0 : 1), transition: 'opacity 0.3s ease' }} />
      <img src="assets/photo-dark.png" alt="Edan Corleto — dark"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%', opacity: hovered ? 0 : (dark ? 1 : 0), transition: 'opacity 0.3s ease 0.1s' }} />
      {/* Surprise */}
      <img src="assets/hover-surprise.png" alt="👀"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 15%', opacity: hovered ? 1 : 0, transition: 'opacity 0.25s ease' }} />
    </div>
  );
}

function Marquee() {
  const items = [
    'CAPM Certified', 'Alarm.com Platform',
    'PRC Registered Electrical Engineer', 'PRC Master Electrician',
    '35% Bid Close Rate', '300+ Low-Voltage Projects',
    '70+ Projects Managed', 'Available for U.S. Remote',
    'Design × Estimation', 'AI-Augmented Workflow',
  ];
  const doubled = [...items, ...items, ...items];
  return (
    <div style={{
      borderTop: '1px solid var(--line)',
      borderBottom: '1px solid var(--line)',
      overflow: 'hidden',
      padding: '7px 0',
      background: 'var(--bg-elevated)',
    }}>
      <div style={{
        display: 'flex', gap: 44,
        whiteSpace: 'nowrap',
        animation: 'marquee 40s linear infinite',
        width: 'max-content',
      }}>
        {doubled.map((t, i) => (
          <span key={i} className="mono" style={{ fontSize: 10.5, color: 'var(--ink-muted)', letterSpacing: '0.1em', display: 'inline-flex', alignItems: 'center', gap: 36 }}>
            {t}
            <span style={{ color: 'var(--accent)' }}>✦</span>
          </span>
        ))}
      </div>
    </div>
  );
}

function ThemeToggle({ theme, onToggle }) {
  const dark = theme === 'ink';
  return (
    <button onClick={onToggle} aria-label="Toggle dark mode" style={{
      width: 48, height: 26, borderRadius: 13,
      border: '1px solid var(--line-strong)',
      background: dark ? 'var(--ink)' : 'var(--bg-elevated)',
      position: 'relative', cursor: 'pointer',
      transition: 'background 0.3s ease',
      padding: 0, display: 'inline-flex', alignItems: 'center',
    }}>
      <span style={{
        position: 'absolute', width: 20, height: 20, borderRadius: '50%',
        background: dark ? '#f5f5f0' : '#ffffff',
        left: dark ? 25 : 3, top: 2,
        transition: 'left 0.3s ease',
        boxShadow: '0 1px 3px rgba(0,0,0,0.15)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 10,
      }}>{dark ? '☾' : '☀'}</span>
    </button>
  );
}

function Hero({ theme, onToggleTheme }) {
  const D = window.DATA;
  const [time, setTime] = React.useState('');
  const dark = theme === 'ink';

  React.useEffect(() => {
    const tick = () => {
      const d = new Date();
      const opts = { timeZone: 'Asia/Manila', hour: '2-digit', minute: '2-digit', hour12: false };
      setTime(d.toLocaleTimeString('en-US', opts) + ' MNL');
    };
    tick();
    const id = setInterval(tick, 60000);
    return () => clearInterval(id);
  }, []);

  return (
    <section style={{ padding: '6px 48px 8px', maxWidth: 1200, margin: '0 auto', position: 'relative' }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        paddingBottom: 8, marginBottom: 14,
      }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--ink-muted)' }}>
          {time}
        </div>
        <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
          <nav className="main-nav" style={{ display: 'flex', gap: 16, fontSize: 12, color: 'var(--ink-muted)' }}>
            <a href="#experience" data-nav="experience">Experience</a>
            <a href="#skills" data-nav="skills">Skills</a>
            <a href="#projects" data-nav="projects">Projects</a>
            <a href="#contact" data-nav="contact">Contact</a>
          </nav>
          <ThemeToggle theme={theme} onToggle={onToggleTheme} />
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 24, alignItems: 'start' }} className="grid-2">
        <div>
          <Avatar dark={dark} size={80} />
          <div style={{ marginTop: 8 }}>
            <div className="serif" style={{ fontSize: 16, lineHeight: 1.1, marginBottom: 3 }}>
              Hi, I'm <em>Edan</em>. <span style={{ color: 'var(--accent)' }}>✦</span>
            </div>
            <div className="mono" style={{ fontSize: 9.5, color: 'var(--ink-muted)', letterSpacing: '0.08em', marginBottom: 2 }}>
              {D.location}
            </div>
            <div className="mono" style={{ fontSize: 9.5, color: 'var(--accent)', letterSpacing: '0.1em', display: 'flex', alignItems: 'center', gap: 5 }}>
              <span className="avail-dot">●</span> Available for new bids
            </div>
          </div>
        </div>

        <div>
          <h1 className="serif" style={{
            fontSize: 'clamp(28px, 3.8vw, 46px)',
            lineHeight: 0.98, letterSpacing: '-0.02em',
            marginBottom: 3,
          }}>
            Edanuele <em style={{ color: 'var(--accent)' }}>Corleto</em>.
          </h1>
          <div className="mono" style={{ color: 'var(--ink)', fontSize: 10, marginTop: 4, marginBottom: 8 }}>
            DESIGN × ESTIMATION ENGINEER
          </div>
          <p style={{
            fontSize: 'clamp(13px, 1.2vw, 15px)',
            lineHeight: 1.5, maxWidth: 640, marginBottom: 8,
          }}>
            I design and estimate <em>low-voltage security systems</em>. Because the people inside those buildings deserve to feel safe — and that only happens when the system behind it is designed right.
          </p>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px 5px', marginBottom: 8 }}>
            {D.specialties.map((s) => (
              <span key={s} style={{
                fontFamily: 'var(--font-mono)',
                fontSize: 9.5, color: 'var(--ink-muted)',
                padding: '2px 7px',
                border: '1px solid var(--line)',
                borderRadius: 3, letterSpacing: '0.03em',
              }}>{s}</span>
            ))}
          </div>

          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            <a href={`mailto:${D.email}`} className="btn">Request a bid review →</a>
            <a href={`https://${D.calendly}`} className="btn secondary">Schedule a call</a>
            <a href={`https://${D.linkedin}`} className="btn secondary">LinkedIn</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function StatsReel() {
  const D = window.DATA;
  if (!window.__tweaks || !window.__tweaks.showStats) return null;

  return (
    <section style={{ padding: '4px 48px 10px', maxWidth: 1200, margin: '0 auto' }}>
      <div className="corner-marks" style={{
        border: '1px solid var(--line)',
        background: 'var(--paper-tint)',
        padding: '6px',
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))',
          gap: 0,
        }}>
          {D.stats.map((s, i) => (
            <div key={i} style={{
              padding: '8px 14px',
              borderRight: i < D.stats.length - 1 ? '1px dashed var(--line)' : 'none',
            }}>
              <div className="serif" style={{
                fontSize: 22, lineHeight: 1,
                letterSpacing: '-0.02em', color: 'var(--ink)',
                marginBottom: 3,
              }}>{s.number}</div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', marginBottom: 2, fontWeight: 500 }}>
                {s.label}
              </div>
              <div style={{ fontSize: 11, color: 'var(--ink-muted)', lineHeight: 1.35 }}>
                {s.context}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function About() {
  const D = window.DATA;
  return (
    <section id="about" style={{ padding: '8px 48px 12px', maxWidth: 1200, margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2.6fr', gap: 32, alignItems: 'start' }} className="grid-2">
        <div style={{ position: 'sticky', top: 20 }}>
          <SectionLabel num="01">About</SectionLabel>
          <div className="mono faint" style={{ fontSize: 10, marginTop: 8, lineHeight: 1.6 }}>
            <div>NAME · Edanuele Corleto</div>
            <div>ROLE · {D.title}</div>
            <div>EMPLOYER · {D.company}</div>
            <div>LOCATION · Rizal, PH</div>
            <div>AVAILABILITY · U.S. remote</div>
            <div style={{ marginTop: 5, color: 'var(--accent)' }}>STATUS · TAKING BIDS</div>
          </div>
        </div>
        <div>
          {D.about.map((p, i) => (
            <p key={i} style={{
              fontSize: 14.5, lineHeight: 1.55,
              marginBottom: 8, color: 'var(--ink)',
            }}>
              {i === 2 && <span className="mono" style={{ fontSize: 10, color: 'var(--accent)', display: 'block', marginBottom: 4 }}>// ON AI</span>}
              {p}
            </p>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TickDivider, SectionLabel, Hero, StatsReel, About, Avatar, ThemeToggle, Marquee });