/* global React, NavLink, Icon */
const { useState: useState2, useMemo: useMemo2 } = React;

/* ============== PRICING ============== */
const TIERS = [
  {
    name: 'Lite',
    price: 35000,
    tagline: 'Starter social presence',
    items: ['6 static posts / month', '2 GIFs / month', 'Content strategy & calendar', 'Posting + boosting', 'Monthly engagement report'],
  },
  {
    name: 'Mid',
    price: 65000,
    tagline: 'Most popular for growth',
    items: ['10 static posts / month', '2 GIFs OR short video animations', 'Full content strategy', 'Posting, boosting & community engagement', 'Bi-weekly performance reports'],
    featured: true,
  },
  {
    name: 'Pro',
    price: 100000,
    tagline: 'Full-service campaigns',
    items: ['20 static posts / month', '4 GIFs + 4 short video animations', 'Strategy + content calendar', 'Full posting, boosting & engagement', 'Weekly insights & quarterly reviews'],
  },
];

const PER_OUTPUT = [
  { tag: 'STATIC', name: 'Marketing material', desc: 'FB/IG post · poster · banner · menu board', price: 4500 },
  { tag: 'STATIC', name: 'Material resizing', desc: 'When master file or PDF is already available', price: 2500, from: 'from ₱2,000 if from us' },
  { tag: 'MOTION', name: 'GIF creation', desc: 'New animation from scratch', price: 4500, from: '₱2,500 if animating an existing static' },
  { tag: 'MOTION', name: 'Short video animation', desc: 'No shoot — animation only', price: 5000 },
  { tag: 'PHOTO', name: 'Food photography', desc: 'Studio session, scaled to your shot list', price: 75000, from: 'starts at' },
  { tag: 'SPACE', name: 'Interior & 3D design', desc: 'Shop · restaurant · kiosk concepts', price: 35000, from: 'starts at, per 15 sqm' },
];

const CUSTOM_PRICING = [
  { name: 'Web landing page design & development', desc: 'High-converting websites and landing pages designed to launch products, capture leads, and grow businesses.', price: 90000, timeline: '4–6 weeks' },
  { name: 'Internal web application development', desc: 'Custom internal software for CRM, HR, payroll, operations, inventory, booking, reporting, and business automation.', price: 300000, timeline: '8–16 weeks' },
  { name: 'Mobile app development', desc: 'Native and cross-platform mobile apps designed to streamline operations and improve customer experiences.', price: 450000, timeline: '10–20 weeks' },
  { name: 'Interior & 3D design', desc: 'Interior concepts and realistic 3D visualizations for retail, hospitality, offices, restaurants, and commercial spaces.', price: 35000, timeline: '2–4 weeks' },
];

function fmt(n) {
  return '₱' + n.toLocaleString('en-US');
}

function Pricing() {
  const [mode, setMode] = useState2('subs');
  return (
    <section id="pricing" className="gp-section">
      <div className="gp-shell">
        <div className="gp-section-head">
          <div>
            <span className="gp-eyebrow">Pricing · 05</span>
            <h2 className="gp-display gp-display-lg" style={{ marginTop: 16 }}>
              Simple pricing.<br />Serious creative.
            </h2>
          </div>
          <p>Choose the engagement that fits your business—from monthly creative support to one-off deliverables or fully custom software projects. Every project is quoted in PHP with transparent pricing and a clearly defined scope from day one.</p>
        </div>

        <div className="gp-pricing-toggle">
          <button className={mode === 'subs' ? 'on' : ''} onClick={() => setMode('subs')}>Monthly subscriptions</button>
          <button className={mode === 'per' ? 'on' : ''} onClick={() => setMode('per')}>Price per output</button>
          <button className={mode === 'copy' ? 'on' : ''} onClick={() => setMode('copy')}>Copywriting</button>
          <button className={mode === 'custom' ? 'on' : ''} onClick={() => setMode('custom')}>Technology services</button>
        </div>

        {mode === 'subs' && (
          <div className="gp-tier-grid">
            {TIERS.map((t) => (
              <div key={t.name} className={'gp-tier' + (t.featured ? ' featured' : '')}>
                <div>
                  <div className="gp-tier-name">{t.name}</div>
                  <p style={{ marginTop: 8, fontSize: 14, color: t.featured ? 'rgba(255,247,241,0.7)' : 'var(--gp-ink-soft)' }}>{t.tagline}</p>
                </div>
                <div className="gp-tier-price">
                  <span className="currency">₱</span>
                  <span className="num">{(t.price / 1000)}K</span>
                  <span className="per"> / month</span>
                </div>
                <ul>
                  {t.items.map((it) => (
                    <li key={it}><span className="check"><Icon name="check" size={11} /></span><span>{it}</span></li>
                  ))}
                </ul>
                <NavLink href="#contact" className={'gp-btn ' + (t.featured ? 'gp-btn-primary' : 'gp-btn-ink')}>Get started <Icon name="arrow" size={14} /></NavLink>
              </div>
            ))}
          </div>
        )}

        {mode === 'per' && (
          <div className="gp-per-output">
            {PER_OUTPUT.map((p) => (
              <div key={p.name} className="gp-per-output-row">
                <div>
                  <span className="gp-eyebrow">{p.tag}</span>
                  <div className="name">{p.name}</div>
                  <div className="desc">{p.desc}</div>
                </div>
                <div className="price">
                  {fmt(p.price)}
                  {p.from && <span className="from">{p.from}</span>}
                </div>
              </div>
            ))}
          </div>
        )}

        {mode === 'copy' && (
          <div className="gp-tier-grid" style={{ gridTemplateColumns: '1fr', maxWidth: 720, margin: '0 auto' }}>
            <div className="gp-tier featured">
              <div>
                <div className="gp-tier-name">Copywriting</div>
                <p style={{ marginTop: 8, fontSize: 14, color: 'rgba(255,247,241,0.7)' }}>A dedicated writer plugged into your brand voice.</p>
              </div>
              <div className="gp-tier-price">
                <span className="currency">₱</span>
                <span className="num">10K</span>
                <span className="per"> / month</span>
              </div>
              <ul>
                <li><span className="check"><Icon name="check" size={11} /></span><span>Captions, headlines, scripts and long-form copy</span></li>
                <li><span className="check"><Icon name="check" size={11} /></span><span>Pairs with any social media subscription</span></li>
              </ul>
              <NavLink href="#contact" className="gp-btn gp-btn-primary">Add copy to my plan <Icon name="arrow" size={14} /></NavLink>
            </div>
          </div>
        )}

        {mode === 'custom' && (
          <div>
            <div className="gp-per-output">
              {CUSTOM_PRICING.map((p) => (
                <div key={p.name} className="gp-per-output-row">
                  <div>
                    <div className="name">{p.name}</div>
                    <div className="desc">{p.desc}</div>
                  </div>
                  <div className="price">
                    <span className="starts">Starts at</span>
                    {fmt(p.price)}
                    <span className="timeline">Estimated timeline: {p.timeline}</span>
                  </div>
                </div>
              ))}
            </div>
            <div className="gp-cta">
              <div>
                <p className="gp-cta-text">Not sure what you need?</p>
                <p className="gp-cta-sub">Every business is different. Tell us what you're building and we'll recommend the right solution, timeline, and budget.</p>
              </div>
              <NavLink href="#contact" className="gp-btn gp-btn-primary">Get a custom quote <Icon name="arrow" size={16} /></NavLink>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

/* ============== QUOTE CALCULATOR ============== */
const CALC_ITEMS = [
  { id: 'static', label: 'Static posts / materials', unit: 'posts', price: 4500 },
  { id: 'gifs', label: 'GIF animations', unit: 'gifs', price: 4500 },
  { id: 'videos', label: 'Short video animations', unit: 'videos', price: 5000 },
  { id: 'resize', label: 'Static resizes', unit: 'resizes', price: 2500 },
];

function Calculator() {
  const [counts, setCounts] = useState2({ static: 6, gifs: 2, videos: 0, resize: 0 });
  const [copy, setCopy] = useState2(false);

  const lines = useMemo2(() => CALC_ITEMS
    .filter((it) => counts[it.id] > 0)
    .map((it) => ({ ...it, qty: counts[it.id], total: counts[it.id] * it.price })), [counts]);
  const subtotal = lines.reduce((a, l) => a + l.total, 0) + (copy ? 10000 : 0);

  const set = (id, delta) => setCounts((c) => ({ ...c, [id]: Math.max(0, Math.min(40, c[id] + delta)) }));

  return (
    <section className="gp-section" style={{ paddingTop: 0 }}>
      <div className="gp-shell">
        <div className="gp-calc">
          <div className="gp-calc-fields">
            <div>
              <span className="gp-eyebrow" style={{ color: 'rgba(255,247,241,0.6)' }}>Build your quote · live</span>
              <h2 className="gp-display gp-display-md" style={{ marginTop: 12, marginBottom: 8, color: 'var(--gp-cream)' }}>
                Mix and match what you need.
              </h2>
              <p style={{ color: 'rgba(255,247,241,0.7)', maxWidth: 480, fontSize: 16 }}>
                Adjust the counts to ballpark your monthly creative spend. Send it our way and we'll firm it up within a day.
              </p>
            </div>

            {CALC_ITEMS.map((it) => (
              <div key={it.id} className="gp-calc-field">
                <label>{it.label} · <span style={{ fontFamily: 'var(--gp-font-mono)', color: 'rgba(255,247,241,0.5)' }}>{fmt(it.price)} ea</span></label>
                <div className="gp-calc-field-row">
                  <button className="gp-calc-step" onClick={() => set(it.id, -1)} disabled={counts[it.id] === 0}><Icon name="minus" size={14} /></button>
                  <div className="val">{counts[it.id]}<span className="unit">{it.unit}</span></div>
                  <button className="gp-calc-step" onClick={() => set(it.id, 1)}><Icon name="plus" size={14} /></button>
                </div>
              </div>
            ))}

            <label style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer', padding: '12px 0', fontSize: 14 }}>
              <span
                onClick={() => setCopy(!copy)}
                style={{
                  width: 44, height: 24, borderRadius: 999,
                  background: copy ? 'linear-gradient(135deg,#FF8A8A,#FFC58A)' : 'rgba(255,247,241,0.15)',
                  position: 'relative', transition: 'background 0.2s', flexShrink: 0,
                }}
              >
                <span style={{
                  position: 'absolute', top: 3, left: copy ? 23 : 3,
                  width: 18, height: 18, borderRadius: '50%', background: 'white',
                  transition: 'left 0.2s',
                }}></span>
              </span>
              <span style={{ color: 'rgba(255,247,241,0.85)' }}>Add copywriting · {fmt(10000)} / month</span>
            </label>
          </div>

          <div className="gp-calc-summary">
            <span className="gp-eyebrow">Estimated total</span>
            <div className="total">
              <span className="currency">₱</span>
              <span className="num">{(subtotal / 1000).toFixed(subtotal % 1000 === 0 ? 0 : 1)}K</span>
              <span className="per">per month, all-in</span>
            </div>
            <div className="gp-calc-breakdown">
              {lines.length === 0 && <div className="gp-calc-breakdown-row"><span>Add some materials to see a breakdown</span></div>}
              {lines.map((l) => (
                <div key={l.id} className="gp-calc-breakdown-row">
                  <span>{l.qty}× {l.label.toLowerCase()}</span>
                  <span>{fmt(l.total)}</span>
                </div>
              ))}
              {copy && (
                <div className="gp-calc-breakdown-row">
                  <span>Copywriting subscription</span>
                  <span>{fmt(10000)}</span>
                </div>
              )}
            </div>
            <NavLink href="#contact" className="gp-btn gp-btn-primary" style={{ justifyContent: 'center', marginTop: 8 }}>Send this to Giant Peach <Icon name="arrow" size={14} /></NavLink>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pricing, Calculator, fmt });