/* 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: 30000, from: 'starts at, per 15 sqm' },
];

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 · 03</span>
            <h2 className="gp-display gp-display-lg" style={{ marginTop: 16 }}>
              Honest pricing,<br />no surprises.
            </h2>
          </div>
          <p>Subscribe for ongoing social, or pay per piece for one-off needs. All prices in PHP, all-inclusive of revisions.</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>
        </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>
        )}
      </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 });