/* 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" /></>,
    menu: <path d="M4 7h16M4 12h16M4 17h16" />,
    close: <path d="M6 6l12 12M18 6 6 18" />,
    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, onClick }) {
  const id = href.replace('#', '');
  return (
    <a href={href} className={className} style={style}
      onClick={(e) => { e.preventDefault(); gotoSection(id); if (onClick) onClick(); }}>
      {children}
    </a>
  );
}

function Nav() {
  const [open, setOpen] = useState(false);
  const close = () => setOpen(false);
  const links = [
    ['#top', 'Home'],
    ['#about', 'About'],
    ['#services', 'Services'],
    ['#products', 'Products'],
    ['#pricing', 'Pricing']];

  return (
    <nav className="gp-nav">
      <NavLink href="#top" className="gp-nav-brand" onClick={close}>
        <img src="assets/logo-horizontal.png" alt="Giant Peach" />
      </NavLink>
      <div className="gp-nav-links">
        {links.map(([href, label]) => <NavLink key={href} href={href}>{label}</NavLink>)}
      </div>
      <div className="gp-nav-actions">
        <NavLink href="#contact" className="gp-btn gp-btn-ink gp-btn-sm" onClick={close}>Let's partner up <Icon name="arrowUp" size={14} /></NavLink>
        <button
          type="button"
          className="gp-nav-toggle"
          aria-label={open ? 'Close menu' : 'Open menu'}
          aria-expanded={open}
          onClick={() => setOpen(!open)}>
          <Icon name={open ? 'close' : 'menu'} size={20} />
        </button>
      </div>
      {open &&
      <div className="gp-nav-menu">
          {links.map(([href, label]) => <NavLink key={href} href={href} onClick={close}>{label}</NavLink>)}
          <NavLink href="#contact" className="gp-btn gp-btn-primary gp-nav-menu-cta" onClick={close}>Let's partner up <Icon name="arrowUp" size={14} /></NavLink>
        </div>}
    </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-shell">
        <div className="gp-hero-content gp-reveal">
          <span className="gp-eyebrow">CREATIVE & TECHNOLOGY PARTNER · MANILA</span>
          <h1 className="gp-display gp-display-xl">
            Creative excellence,<br />
            <em>engineered to scale.</em>
          </h1>
          <p className="lede">
            Giant Peach is your creative and technology partner. We help businesses build their brand,
            streamline operations, and grow — through creative services, custom software, and proprietary products.
          </p>
          <div className="gp-hero-ctas">
            <NavLink href="#services" className="gp-btn gp-btn-primary">Explore services <Icon name="arrow" size={16} /></NavLink>
            <NavLink href="#products" className="gp-btn gp-btn-ghost">See our products</NavLink>
          </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 in<br />marketing & tech</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>
        <div className="gp-hero-visual gp-reveal">
          <div className="gp-peach-blob"></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 }}>
              One partner for brand,<br />software, and growth.
            </h2>
            <p style={{ fontSize: 18, color: 'var(--gp-ink-soft)', maxWidth: 480, lineHeight: 1.55 }}>
              We're a creative and technology partner with a simple thesis: modern businesses
              need both sharp creative and smart software to grow. So we deliver both — from
              ongoing creative execution to custom platforms and our own products.
            </p>
            <div className="gp-about-points">
              <div className="gp-about-point">
                <span className="idx">/01</span>
                <span className="txt">Ongoing creative that keeps your brand consistent and moving.</span>
              </div>
              <div className="gp-about-point">
                <span className="idx">/02</span>
                <span className="txt">Custom websites, internal systems, and mobile apps built to fit.</span>
              </div>
              <div className="gp-about-point">
                <span className="idx">/03</span>
                <span className="txt">Proprietary products that solve real operational challenges.</span>
              </div>
              <div className="gp-about-point">
                <span className="idx">/04</span>
                <span className="txt">One long-term partner in Manila, not a dozen scattered vendors.</span>
              </div>
            </div>
          </div>
          <div className="gp-about-visual">
            <div className="gp-about-glow"></div>
            <div className="gp-about-visual-leaf l1"></div>
            <div className="gp-about-visual-leaf l2"></div>
            <div className="gp-about-pillars">
              <div className="gp-about-pillar p1"><Icon name="target" size={16} /><span>Brand</span></div>
              <div className="gp-about-pillar p2"><Icon name="grid" size={16} /><span>Software</span></div>
              <div className="gp-about-pillar p3"><Icon name="arrowUp" size={16} /><span>Growth</span></div>
            </div>
            <div className="gp-about-visual-stamp">
              <div className="num">10+</div>
              <div className="lab">years of marketing, technology, account & project management expertise across F&B, fintech, design and tech</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============== CREATIVE SUBSCRIPTION (SERVICES) ============== */
const pad2 = (n) => String(n).padStart(2, '0');

const SERVICES = [
{ icon: 'target', name: 'Brand strategy', desc: 'Positioning, messaging, content pillars, campaign planning and a marketing roadmap so every creative effort supports your business goals.' },
{ icon: 'chat', name: 'Social media management', desc: 'Strategy, content calendars, publishing, boosting, community management and performance reporting.' },
{ icon: 'image', name: 'Social media content', desc: 'Static posts, carousels, GIFs, reels and short-form videos designed to stop the scroll and strengthen your brand.' },
{ icon: 'pen', name: 'Copywriting', desc: 'Headlines, captions, scripts, blogs, website copy and long-form content written in your brand voice.' },
{ icon: 'play', name: 'Video animation', desc: 'Motion graphics, animated explainers, product showcases and campaign videos.' },
{ icon: 'layout', name: 'Marketing collateral', desc: 'Brochures, presentations, posters, banners, menus, sales decks and event materials for print and digital.' }];


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">Creative Subscription · 02</span>
            <h2 className="gp-display gp-display-lg" style={{ marginTop: 16 }}>
              Consistent creative,<br />month after month.
            </h2>
          </div>
          <p>Ongoing creative support through flexible monthly subscriptions for businesses that need consistent marketing and design execution.</p>
        </div>

        <div className="gp-services-grid">
          {SERVICES.map((s, i) =>
          <div
            key={s.name}
            className={'gp-service' + (active === i ? ' active' : '')}
            onMouseEnter={() => setActive(i)}>

              <div className="gp-service-num">{pad2(i + 1)} / {pad2(SERVICES.length)}</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>);

}

/* ============== TECHNOLOGY SERVICES (section 03) ============== */
const CUSTOM_PROJECTS = [
{ icon: 'grid', name: 'Web landing page design & development', desc: 'High-converting, responsive websites and landing pages designed and developed to showcase your brand, generate leads, and drive business growth.' },
{ icon: 'layout', name: 'Internal web application development', desc: 'Custom business systems built to streamline operations, automate workflows and improve efficiency.', tags: ['CRM', 'HR', 'Payroll', 'Booking', 'Inventory', 'Customer portals', 'Dashboards'] },
{ icon: 'rocket', name: 'Mobile app development', desc: 'Custom iOS and Android applications built to improve customer experiences and support business growth.' },
{ icon: 'target', name: 'Interior & 3D design', desc: 'Concept development, space planning, and realistic 3D visualizations for retail, restaurants, kiosks, commercial spaces, and branded environments.' }];


function CustomProjects() {
  const [active, setActive] = useState(0);
  return (
    <section id="solutions" className="gp-section">
      <div className="gp-shell">
        <div className="gp-section-head">
          <div>
            <span className="gp-eyebrow">Technology services · 03</span>
            <h2 className="gp-display gp-display-lg" style={{ marginTop: 16 }}>
              Technology,<br />built to launch.
            </h2>
          </div>
          <p>Custom creative and technology solutions designed to solve business challenges and support long-term growth.</p>
        </div>

        <div className="gp-services-grid cols-2">
          {CUSTOM_PROJECTS.map((s, i) =>
          <div
            key={s.name}
            className={'gp-service' + (active === i ? ' active' : '')}
            onMouseEnter={() => setActive(i)}>

              <div className="gp-service-num">{pad2(i + 1)} / {pad2(CUSTOM_PROJECTS.length)}</div>
              <div className="gp-service-icon"><Icon name={s.icon} size={26} /></div>
              <h3>{s.name}</h3>
              <p>{s.desc}</p>
              {s.tags &&
              <div className="gp-service-tags">
                  {s.tags.map((t) => <span key={t} className="gp-service-tag">{t}</span>)}
                </div>
              }
            </div>
          )}
        </div>

        <div className="gp-cta">
          <p className="gp-cta-text">Have a project in mind?<br />Let's build something together.</p>
          <NavLink href="#contact" className="gp-btn gp-btn-primary">Request a proposal <Icon name="arrow" size={16} /></NavLink>
        </div>
      </div>
    </section>);

}

/* ============== PRODUCTS (proprietary SaaS catalog) ============== */
/* NOTE: draft feature/benefit copy for review. Dedicated /products/<slug>
   landing pages are deferred — cards currently link to the live apps. */
const PRODUCTS = [
{
  key: 'content-studio',
  name: 'Content Studio',
  headline: 'Turning Content Plans into Published Results.',
  desc: 'A modern content planning platform that helps agencies, marketing teams and brands streamline their entire content workflow — from campaign planning and editorial calendars to approvals, production tracking and delivery.',
  features: ['Campaign planning & editorial calendars', 'Approval workflows & version control', 'Production & task tracking', 'Centralized content library & delivery'],
  app: 'https://cstudio.giantpeachglobal.com',
  ctas: [
  { label: 'Learn more', href: 'https://cstudio.giantpeachglobal.com', primary: true }] },

{
  key: 'lasi',
  name: 'LASI',
  sub: 'Lease Administration for Smart Investments',
  headline: 'Smart Property Management for Modern Lessors.',
  desc: 'An intelligent property and lease management platform for property owners, landlords and real estate investors. Manage properties, tenants, lease agreements, payments, renewals and documents from one centralized dashboard.',
  features: ['Property, tenant & lease management', 'Payments, renewals & reminders', 'Document storage & portfolio dashboard', 'Real-time visibility across your portfolio'],
  app: 'https://lasi.giantpeachglobal.com',
  ctas: [
  { label: 'Learn more', href: 'https://lasi.giantpeachglobal.com', primary: true }] }];



function ProductCard({ p }) {
  return (
    <div className="gp-product-card">
      <span className="gp-eyebrow">A Giant Peach product</span>
      <h3 className="gp-product-name">{p.name}</h3>
      {p.sub && <p className="gp-product-sub">{p.sub}</p>}
      <p className="gp-product-headline">{p.headline}</p>
      <p className="gp-product-desc">{p.desc}</p>
      <ul className="gp-product-features">
        {p.features.map((f) =>
        <li key={f}><span className="check"><Icon name="check" size={11} /></span><span>{f}</span></li>
        )}
      </ul>
      <div className="gp-product-ctas">
        {p.ctas.map((c) =>
        c.href.startsWith('#') ?
        <NavLink key={c.label} href={c.href} className={'gp-btn gp-btn-sm ' + (c.primary ? 'gp-btn-primary' : 'gp-btn-ghost')}>{c.label}{c.primary && <Icon name="arrow" size={14} />}</NavLink> :

        <a key={c.label} href={c.href} target="_blank" rel="noopener noreferrer" className={'gp-btn gp-btn-sm ' + (c.primary ? 'gp-btn-primary' : 'gp-btn-ghost')}>{c.label}{c.primary && <Icon name="arrowUp" size={14} />}</a>
        )}
      </div>
    </div>);

}

function Products() {
  return (
    <section id="products" className="gp-services-bg gp-section">
      <div className="gp-shell">
        <div className="gp-section-head">
          <div>
            <span className="gp-eyebrow">Products · 04</span>
            <h2 className="gp-display gp-display-lg" style={{ marginTop: 16 }}>
              Software we built,<br />ready for your team.
            </h2>
          </div>
          <p>Proprietary platforms from Giant Peach that solve real operational challenges — with more on the way.</p>
        </div>

        <div className="gp-product-grid">
          {PRODUCTS.map((p) => <ProductCard key={p.key} p={p} />)}
        </div>
      </div>
    </section>);

}

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