/* global React */
const { useState, useEffect, useMemo } = React;

/* ============== ICONS (simple stroke set) ============== */
const Icon = ({ name, size = 22 }) => {
  const c = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const M = {
    arrow: <path d="M5 12h14M13 6l6 6-6 6" />,
    arrowUp: <path d="M7 17 17 7M9 7h8v8" />,
    check: <path d="M5 12l4 4L19 7" />,
    plus: <path d="M12 5v14M5 12h14" />,
    minus: <path d="M5 12h14" />,
    image: <><rect x="3" y="4" width="18" height="16" rx="2" /><circle cx="9" cy="10" r="2" /><path d="m3 17 5-5 4 4 3-3 6 6" /></>,
    pen: <><path d="M14 4l6 6L8 22H2v-6L14 4z" /><path d="M13 5l6 6" /></>,
    type: <><path d="M5 7V5h14v2" /><path d="M9 19h6" /><path d="M12 5v14" /></>,
    play: <path d="M7 5v14l11-7z" />,
    sparkle: <><path d="M12 2v6M12 16v6M2 12h6M16 12h6M5 5l4 4M15 15l4 4M19 5l-4 4M9 15l-4 4" /></>,
    layout: <><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18M9 21V9" /></>,
    bolt: <path d="m13 2-3 8h6l-3 12 3-12H7l3-8z" />,
    heart: <path d="M12 21s-7-4.5-9.5-9.5C.7 7.7 3 4 7 4c2 0 3.5 1 5 3 1.5-2 3-3 5-3 4 0 6.3 3.7 4.5 7.5C19 16.5 12 21 12 21z" />,
    chat: <><path d="M21 15a4 4 0 0 1-4 4H8l-5 4V6a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z" /></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 7 9-7" /></>,
    phone: <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.7 19.7 0 0 1-8.6-3 19.4 19.4 0 0 1-6-6 19.7 19.7 0 0 1-3-8.6A2 2 0 0 1 4.2 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7A2 2 0 0 1 22 17z" />,
    map: <><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" /></>,
    sparkles2: <><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" /></>,
    grid: <><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></>,
    target: <><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="1.5" fill="currentColor" /></>,
    rocket: <><path d="M5 19c-2 0-3-1-3-3 4 0 5 1 5 3l-2 0z" /><path d="M14 6s4-3 8-3c0 4-3 8-3 8l-3 3c-1 1-3 1-4 0L8 10c-1-1-1-3 0-4l3-3" /><circle cx="14" cy="9" r="1.5" /></>
  };
  return <svg {...c}>{M[name]}</svg>;
};

/* ============== NAV ============== */
function gotoSection(id) {
  const el = id === 'top' ? document.body : document.getElementById(id);
  if (el) el.scrollIntoView({ behavior: 'smooth' });
  history.replaceState(null, '', window.location.pathname);
}

function NavLink({ href, children, className, style }) {
  const id = href.replace('#', '');
  return (
    <a href={href} className={className} style={style}
      onClick={(e) => { e.preventDefault(); gotoSection(id); }}>
      {children}
    </a>
  );
}

function Nav() {
  return (
    <nav className="gp-nav">
      <NavLink href="#top" className="gp-nav-brand">
        <img src="assets/logo-horizontal.png" alt="Giant Peach" />
      </NavLink>
      <div className="gp-nav-links">
        <NavLink href="#about">About</NavLink>
        <NavLink href="#services">Services</NavLink>
        <NavLink href="#pricing">Pricing</NavLink>
      </div>
      <NavLink href="#contact" className="gp-btn gp-btn-ink gp-btn-sm">Let's partner up <Icon name="arrowUp" size={14} /></NavLink>
    </nav>);
}

/* ============== HERO ============== */
function Hero() {
  return (
    <header id="top" className="gp-hero">
      <div className="gp-hero-bg"></div>
      <div className="gp-hero-grain"></div>
      <div className="gp-peach-blob"></div>
      <div className="gp-shell">
        <div className="gp-hero-content gp-reveal">
          <span className="gp-eyebrow">MANILA × YOUR BRAND · EST. 2025</span>
          <h1 className="gp-display gp-display-xl" style={{ width: "880px" }}>
            Creative excellence,<br />
            <em>community impact.</em>
          </h1>
          <p className="lede">
            Fast, affordable creative work made by the Philippines' most talented artists.
            Marketing materials that punch above their price tag — because great work shouldn't cost a fortune.
          </p>
          <div className="gp-hero-ctas">
            <NavLink href="#services" className="gp-btn gp-btn-primary">View our services <Icon name="arrow" size={16} /></NavLink>
            <NavLink href="#pricing" className="gp-btn gp-btn-ghost">See pricing</NavLink>
          </div>
        </div>
        <div className="gp-hero-meta">
          <div className="gp-hero-meta-item">
            <div className="num gp-grad-text">15+</div>
            <div className="label">Years combined<br />in marketing</div>
          </div>
          <div className="gp-hero-meta-divider"></div>
          <div className="gp-hero-meta-item">
            <div className="num gp-grad-text">120+</div>
            <div className="label">Projects shipped<br />and counting</div>
          </div>
          <div className="gp-hero-meta-divider"></div>
          <div className="gp-hero-meta-item">
            <div className="num gp-grad-text">4</div>
            <div className="label">Industries we<br />know inside out</div>
          </div>
        </div>
      </div>
    </header>);

}

/* ============== MARQUEE ============== */
function Marquee() {
  const items = ['Food & Beverage', 'Financial Services', 'Design', 'Technology'];
  const all = [...items, ...items, ...items];
  return (
    <div className="gp-marquee">
      <div className="gp-marquee-track">
        {all.map((it, i) =>
        <div key={i} className="gp-marquee-item">
            <span className="dot"></span>{it}
          </div>
        )}
      </div>
    </div>);

}

/* ============== ABOUT ============== */
function About() {
  return (
    <section id="about" className="gp-section">
      <div className="gp-shell">
        <div className="gp-about">
          <div>
            <span className="gp-eyebrow">About us · 01</span>
            <h2 className="gp-display gp-display-lg" style={{ marginTop: 16, marginBottom: 24 }}>
              Bridging talent<br />and opportunity.
            </h2>
            <p style={{ fontSize: 18, color: 'var(--gp-ink-soft)', maxWidth: 480, lineHeight: 1.55 }}>
              We're a creative agency with a simple thesis: businesses need fast,
              affordable work — and the Philippines has artists who deserve a global stage.
              Giant Peach is the bridge between them.
            </p>
            <div className="gp-about-points">
              <div className="gp-about-point">
                <span className="idx">/01</span>
                <span className="txt">Businesses need fast, affordable creative work.</span>
              </div>
              <div className="gp-about-point">
                <span className="idx">/02</span>
                <span className="txt">The Philippines has immense, untapped artistic talent.</span>
              </div>
              <div className="gp-about-point">
                <span className="idx">/03</span>
                <span className="txt">Giant Peach connects them — high-quality work, budget-friendly prices.</span>
              </div>
              <div className="gp-about-point">
                <span className="idx">/04</span>
                <span className="txt">Our artists get the career opportunities they deserve.</span>
              </div>
            </div>
          </div>
          <div className="gp-about-visual">
            <div className="gp-about-visual-leaf l1"></div>
            <div className="gp-about-visual-leaf l2"></div>
            <div className="gp-about-visual-stamp">
              <div className="num">10+</div>
              <div className="lab">years of marketing, account & project management expertise across F&B, fintech, design and tech</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============== SERVICES ============== */
const SERVICES = [
{ num: '01', icon: 'image', name: 'Social media materials', desc: 'Static posts, GIFs, and short videos that stop the scroll across IG, TikTok and FB.' },
{ num: '02', icon: 'chat', name: 'Social media management', desc: 'Strategy, calendars, posting, boosting and community engagement reporting.' },
{ num: '03', icon: 'pen', name: 'Copywriting', desc: 'Headlines, captions, scripts, and longer-form copy with a voice your audience trusts.' },
{ num: '04', icon: 'play', name: 'Video animation', desc: 'Snackable motion for product launches, explainers and campaign hits.' },
{ num: '05', icon: 'layout', name: 'Marketing materials', desc: 'Posters, banners, menu boards, decks — print or digital, on brand every time.' },
{ num: '06', icon: 'grid', name: 'Interior & 3D design', desc: 'Shop, restaurant and kiosk concepts that turn space into brand moments.' }];


function Services() {
  const [active, setActive] = useState(0);
  return (
    <section id="services" className="gp-services-bg gp-section">
      <div className="gp-shell">
        <div className="gp-section-head">
          <div>
            <span className="gp-eyebrow">What we offer · 02</span>
            <h2 className="gp-display gp-display-lg" style={{ marginTop: 16 }}>
              Six services.<br />One peach of a team.
            </h2>
          </div>
          <p>From a single static post to a full quarter of campaigns — we plug in where you need us, scale to fit your budget, and ship on time.</p>
        </div>

        <div className="gp-services-grid">
          {SERVICES.map((s, i) =>
          <div
            key={s.num}
            className={'gp-service' + (active === i ? ' active' : '')}
            onMouseEnter={() => setActive(i)}>
            
              <div className="gp-service-num">{s.num} / 06</div>
              <div className="gp-service-icon"><Icon name={s.icon} size={26} /></div>
              <h3>{s.name}</h3>
              <p>{s.desc}</p>
            </div>
          )}
        </div>

        <p style={{ textAlign: 'center', marginTop: 40, color: 'var(--gp-ink-soft)', fontSize: 15 }}>
          And more — just tell us what help you need. <NavLink href="#contact" style={{ color: 'var(--gp-coral-deep)', fontWeight: 600, borderBottom: '1px solid currentColor', paddingBottom: 1 }}>Start a conversation →</NavLink>
        </p>
      </div>
    </section>);

}

Object.assign(window, { Icon, Nav, Hero, Marquee, About, Services, NavLink, gotoSection });