/* Pricing + Contact sections for ZenTag */

// ============ PRICING ============
function Pricing() {
  const cfg = (typeof window !== 'undefined' && window.ZENTAG) || { urls: { signup: '/login', order: '/login' } };

  // Aligned with App\Models\CardOrder::TIERS — one-time card purchases.
  const tiers = [
    {
      id: 'profile',
      name: 'Digital Profile',
      tagline: 'Your card lives here. Free forever.',
      price: 0,
      currency: 'GH₵',
      priceNote: 'free',
      cta: 'Create profile',
      ctaHref: cfg.urls.signup,
      featured: false,
      includes: [
        'Apple-style contact page',
        'Photo, banner & custom links',
        'Snapchat, X, Threads & custom socials',
        'Downloadable vCard',
        'Activated after card order',
      ],
    },
    {
      id: 'essential',
      name: 'ZenTag Essential',
      tagline: 'The last business card you’ll ever need.',
      price: 300,
      currency: 'GH₵',
      priceNote: 'one-time',
      cta: 'Order Essential',
      ctaHref: cfg.urls.order,
      featured: false,
      includes: [
        'Pre-designed ZenTag card',
        'Light or dark finish',
        'Your URL encoded & ready to tap',
        'Ships across Ghana',
        'Lifetime card warranty',
      ],
    },
    {
      id: 'infinite',
      name: 'ZenTag Infinite',
      tagline: 'Personalise it. Make an impression.',
      price: 500,
      currency: 'GH₵',
      priceNote: 'one-time',
      cta: 'Order Infinite',
      ctaHref: cfg.urls.order,
      featured: true,
      includes: [
        'Your name on the card',
        'Optional logo placement',
        'Premium feel',
        'Light or dark finish',
        'Most popular pick',
      ],
    },
    {
      id: 'custom',
      name: 'ZenTag Custom',
      tagline: 'Your brand, no limits.',
      price: 650,
      currency: 'GH₵',
      priceNote: 'one-time',
      cta: 'Order Custom',
      ctaHref: cfg.urls.order,
      featured: false,
      includes: [
        'Fully bespoke design',
        'Submit print-ready artwork',
        'Premium finish options',
        'Our team reviews & confirms',
        'Volume orders for teams',
      ],
    },
  ];

  return (
    <section id="pricing" className="relative py-32 px-5 overflow-hidden">
      <div className="absolute inset-0 dots-bg opacity-20" style={{ maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 70%)', WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 70%)' }} />
      <div className="mx-auto max-w-6xl relative">
        <SectionTitle
          align="center"
          eyebrow="Cards & pricing"
          title="Pay once for the card. Profile is on us."
          sub="Pick your finish, customise it, and we'll print, encode and ship. Profile goes live once your order is confirmed."
        />

        {/* Tier cards */}
        <div className="mt-12 grid md:grid-cols-2 lg:grid-cols-4 gap-4">
          {tiers.map((t, i) => (
            <Reveal key={t.id} delay={Math.min(i+1, 4)}>
              <div
                className={`relative rounded-3xl p-6 h-full flex flex-col transition-all duration-500 ${t.featured ? 'glass-strong' : 'glass'}`}
                style={t.featured ? {
                  border: '1px solid rgba(255,255,255,0.18)',
                  boxShadow: '0 0 0 1px var(--accent-glow-soft), 0 30px 80px -30px var(--accent-glow)',
                } : {}}
              >
                {t.featured && (
                  <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full text-[10px] font-mono uppercase tracking-widest" style={{ background: 'var(--accent)', color: '#fff', boxShadow: '0 0 20px var(--accent-glow)' }}>
                    Most popular
                  </div>
                )}

                {/* Header */}
                <div>
                  <div className="text-[15px] font-medium tracking-tight">{t.name}</div>
                  <div className="text-[12.5px] text-fog-400 mt-1 leading-snug">{t.tagline}</div>
                </div>

                {/* Price */}
                <div className="mt-6 flex items-baseline gap-1.5">
                  <span className="text-[14px] text-fog-300">{t.currency}</span>
                  <span className="text-[44px] font-medium tracking-tight leading-none text-gradient">
                    {t.price.toLocaleString()}
                  </span>
                  {t.priceNote && <span className="text-[12px] text-fog-400 ml-1">{t.priceNote}</span>}
                </div>
                {t.id === 'profile' && <div className="mt-1 text-[11px] font-mono text-fog-500">Forever. No credit card.</div>}
                {t.id === 'essential' && <div className="mt-1 text-[11px] font-mono text-fog-500">Includes free profile.</div>}
                {t.id === 'infinite' && <div className="mt-1 text-[11px] font-mono text-fog-500">Includes free profile.</div>}
                {t.id === 'custom' && <div className="mt-1 text-[11px] font-mono text-fog-500">Includes free profile.</div>}

                {/* CTA */}
                <a
                  href={t.ctaHref}
                  className={`mt-6 w-full py-3 rounded-full text-[13.5px] font-medium text-center transition-all duration-300 ${t.featured ? '' : 'glass'}`}
                  style={t.featured ? {
                    background: 'linear-gradient(180deg, #fff 0%, #d4d4dc 100%)',
                    color: '#0a0a0d',
                  } : {
                    background: 'rgba(255,255,255,0.06)',
                    border: '1px solid rgba(255,255,255,0.1)',
                  }}
                >
                  {t.cta}
                </a>

                {/* Divider */}
                <div className="mt-6 pt-5 border-t border-white/[0.06]" />

                {/* Features */}
                <ul className="space-y-2.5 text-[13px] text-fog-200 flex-1">
                  {t.includes.map(line => (
                    <li key={line} className="flex items-start gap-2.5">
                      <span className="w-4 h-4 rounded-full flex items-center justify-center mt-0.5 shrink-0" style={{ background: t.featured ? 'var(--accent-glow-soft)' : 'rgba(255,255,255,0.05)', color: t.featured ? 'var(--accent-2)' : '#a8a8b0' }}>
                        <Icon.Check width="9" height="9" />
                      </span>
                      <span className="leading-snug">{line}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>
          ))}
        </div>

        {/* Below-tier callouts */}
        <Reveal delay={4}>
          <div className="mt-10 grid sm:grid-cols-3 gap-3">
            {[
              { i: <Icon.Leaf width="14" height="14"/>, t: 'Admin-reviewed', d: 'Every card is reviewed before activation.' },
              { i: <Icon.Cloud width="14" height="14"/>, t: 'Ships across Ghana', d: 'Pickup or delivery — we’ll coordinate.' },
              { i: <Icon.Users width="14" height="14"/>, t: 'Team orders', d: 'Bulk discounts for teams of 10+.' },
            ].map(c => (
              <div key={c.t} className="rounded-2xl glass p-4 flex items-center gap-3">
                <div className="w-9 h-9 rounded-xl glass flex items-center justify-center shrink-0" style={{ color: 'var(--accent-2)' }}>{c.i}</div>
                <div>
                  <div className="text-[13px] font-medium">{c.t}</div>
                  <div className="text-[12px] text-fog-400">{c.d}</div>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ============ CONTACT FORM ============
function Contact() {
  const [form, setForm] = React.useState({
    name: '',
    email: '',
    company: '',
    interest: 'personal',
    message: '',
  });
  const [sent, setSent] = React.useState(false);

  const interests = [
    { id: 'personal', label: 'A personal card' },
    { id: 'team', label: 'Cards for my team' },
    { id: 'enterprise', label: 'Enterprise rollout' },
    { id: 'press', label: 'Press / partnerships' },
  ];

  const update = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.email) return;
    try {
      const csrf = document.querySelector('meta[name="csrf-token"]')?.content;
      const res = await fetch('/contact', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'X-CSRF-TOKEN': csrf,
          'X-Requested-With': 'XMLHttpRequest',
        },
        body: JSON.stringify(form),
      });
      if (res.ok) {
        setSent(true);
        setForm({ name: '', email: '', company: '', interest: 'personal', message: '' });
        setTimeout(() => setSent(false), 7000);
      } else {
        const err = await res.json().catch(() => ({}));
        alert(err.message || 'Could not send right now. Please try again.');
      }
    } catch (err) {
      alert('Network error: ' + err.message);
    }
  };

  return (
    <section id="contact" className="relative py-32 px-5 overflow-hidden">
      <div className="absolute inset-0 -z-10 pointer-events-none">
        <div className="aurora floatY" style={{
          top: '20%', left: '60%', width: '40vw', height: '40vw',
          background: 'radial-gradient(circle, var(--accent) 0%, transparent 60%)',
          opacity: 0.16,
        }} />
      </div>

      <div className="mx-auto max-w-6xl grid lg:grid-cols-[1fr_1.2fr] gap-12 items-start">
        {/* Left: copy + Ghana offices */}
        <div>
          <Reveal><Eyebrow>Get in touch</Eyebrow></Reveal>
          <Reveal delay={1}>
            <h2 className="display mt-6 text-[clamp(34px,5vw,58px)] text-gradient">
              Let's build your <span className="text-gradient-accent italic font-serif font-normal">network</span>.
            </h2>
          </Reveal>
          <Reveal delay={2}>
            <p className="mt-5 text-[15.5px] text-fog-300 leading-relaxed max-w-md">
              Tell us about your team. We'll get back within one business day — usually faster. For urgent rollouts, ring the Accra office.
            </p>
          </Reveal>

          <Reveal delay={3}>
            <div className="mt-8 space-y-3">
              {[
                { t: 'Office · Accra', a: 'Pokuase - ACP, Accra', p: '+233 55 409 2060 / +233 55 979 3040' },
                { t: 'Email', a: 'info@zentriosolutions.com', p: null },
              ].map(o => (
                <div key={o.t} className="glass rounded-2xl p-4">
                  <div className="text-[11px] font-mono uppercase tracking-widest text-fog-400">{o.t}</div>
                  <div className="text-[13.5px] mt-1 text-fog-100">{o.a}</div>
                  {o.p && <div className="text-[12.5px] mt-0.5 font-mono text-fog-300">{o.p}</div>}
                </div>
              ))}
            </div>
          </Reveal>

          <Reveal delay={4}>
            <div className="mt-7 flex items-center gap-3 text-[12px] text-fog-400">
              <div className="w-5 h-3.5 rounded-sm overflow-hidden flex flex-col" aria-hidden="true">
                <div className="flex-1" style={{ background: '#ce1126' }} />
                <div className="flex-1 relative" style={{ background: '#fcd116' }}>
                  <div className="absolute inset-0 flex items-center justify-center text-[6px] leading-none" style={{ color: '#000' }}>★</div>
                </div>
                <div className="flex-1" style={{ background: '#006b3f' }} />
              </div>
              <span className="font-mono">Proudly built in Ghana · Shipping worldwide</span>
            </div>
          </Reveal>
        </div>

        {/* Right: form */}
        <Reveal delay={2}>
          <form onSubmit={handleSubmit} className="relative rounded-3xl glass-strong p-7 sm:p-9">
            <div className="absolute -inset-px rounded-3xl pointer-events-none" style={{
              background: 'linear-gradient(135deg, rgba(255,255,255,0.08), transparent 40%)',
              WebkitMask: 'linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff)',
              WebkitMaskComposite: 'xor', maskComposite: 'exclude',
              padding: 1,
            }} />

            <div className="flex items-center justify-between">
              <div>
                <div className="text-[16px] font-medium">Talk to ZenTag</div>
                <div className="text-[12.5px] text-fog-400 mt-0.5">We reply within 24 hours.</div>
              </div>
              <div className="flex items-center gap-1.5 text-[11px] font-mono text-fog-400">
                <span className="w-1.5 h-1.5 rounded-full" style={{ background: 'var(--accent)', boxShadow: '0 0 8px var(--accent-glow)' }} />
                Online now
              </div>
            </div>

            <div className="mt-6 grid sm:grid-cols-2 gap-3">
              <Field label="Full name" value={form.name} onChange={update('name')} placeholder="Collins S. Wonder" required />
              <Field label="Work email" value={form.email} onChange={update('email')} placeholder="you@company.gh" type="email" required />
              <Field label="Company" value={form.company} onChange={update('company')} placeholder="ZenTag, Inc." />
              <Field label="Phone (optional)" value={form.phone || ''} onChange={update('phone')} placeholder="+233 ..." />
            </div>

            <div className="mt-5">
              <Label>I'm interested in</Label>
              <div className="mt-2 flex flex-wrap gap-2">
                {interests.map(i => (
                  <button
                    key={i.id}
                    type="button"
                    onClick={() => setForm(f => ({ ...f, interest: i.id }))}
                    className={`px-3.5 py-2 rounded-full text-[12.5px] font-medium border transition-all duration-300 ${form.interest === i.id ? 'text-ink-900' : 'text-fog-200 hover:text-white'}`}
                    style={form.interest === i.id
                      ? { background: '#fff', borderColor: '#fff' }
                      : { background: 'rgba(255,255,255,0.04)', borderColor: 'rgba(255,255,255,0.1)' }}
                  >
                    {i.label}
                  </button>
                ))}
              </div>
            </div>

            <div className="mt-5">
              <Label>Tell us more</Label>
              <textarea
                rows={4}
                value={form.message}
                onChange={update('message')}
                placeholder="Headcount, timelines, anything we should know."
                className="mt-2 w-full rounded-2xl px-4 py-3 text-[13.5px] text-fog-100 placeholder:text-fog-500 outline-none transition-all"
                style={{
                  background: 'rgba(255,255,255,0.04)',
                  border: '1px solid rgba(255,255,255,0.08)',
                  resize: 'vertical',
                }}
                onFocus={(e) => e.target.style.borderColor = 'rgba(255,255,255,0.2)'}
                onBlur={(e) => e.target.style.borderColor = 'rgba(255,255,255,0.08)'}
              />
            </div>

            <div className="mt-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
              <div className="text-[11.5px] text-fog-500 max-w-xs leading-relaxed">
                By submitting, you agree to our privacy notice. We never sell your data.
              </div>
              <button
                type="submit"
                disabled={sent}
                className="btn-primary inline-flex items-center gap-2 disabled:opacity-80"
              >
                {sent ? (
                  <>
                    <Icon.Check width="14" height="14"/> Message sent
                  </>
                ) : (
                  <>
                    Send message
                    <Icon.Arrow width="13" height="13"/>
                  </>
                )}
              </button>
            </div>

            {/* Success Modal */}
            {sent && (
              <div
                className="fixed inset-0 z-[100] flex items-center justify-center px-4"
                onClick={() => setSent(false)}
                style={{
                  background: 'rgba(8, 8, 12, 0.85)',
                  backdropFilter: 'blur(12px)',
                  WebkitBackdropFilter: 'blur(12px)',
                  animation: 'zt-modal-fade-in 0.3s ease-out',
                }}
              >
                <style>{`
                  @keyframes zt-modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
                  @keyframes zt-modal-scale-in { from { opacity: 0; transform: scale(0.92) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
                  @keyframes zt-modal-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
                  @keyframes zt-modal-ring { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } }
                `}</style>
                <div
                  className="relative max-w-md w-full rounded-3xl p-10 text-center"
                  onClick={(e) => e.stopPropagation()}
                  style={{
                    background: 'linear-gradient(135deg, rgba(30,30,40,0.95) 0%, rgba(20,20,30,0.95) 100%)',
                    border: '1px solid rgba(255,255,255,0.1)',
                    boxShadow: '0 25px 60px -10px rgba(0,0,0,0.5), 0 0 80px -10px var(--accent-glow)',
                    animation: 'zt-modal-scale-in 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
                  }}
                >
                  <button
                    onClick={() => setSent(false)}
                    aria-label="Close"
                    className="absolute top-4 right-4 w-8 h-8 rounded-full flex items-center justify-center text-fog-300 hover:text-white transition-colors"
                    style={{ background: 'rgba(255,255,255,0.06)', fontSize: '18px', lineHeight: 1 }}
                  >
                    ×
                  </button>
                  <div className="relative inline-flex items-center justify-center mb-6">
                    <div
                      className="absolute inset-0 rounded-full"
                      style={{ background: 'var(--accent-glow-soft)', animation: 'zt-modal-ring 1.6s ease-out infinite' }}
                    />
                    <div
                      className="relative w-20 h-20 rounded-full flex items-center justify-center"
                      style={{ background: 'var(--accent-glow-soft)', animation: 'zt-modal-pulse 2s ease-in-out infinite' }}
                    >
                      <Icon.Check width="36" height="36"/>
                    </div>
                  </div>
                  <h3 className="text-[26px] font-semibold tracking-tight mb-3" style={{ letterSpacing: '-0.02em' }}>
                    Message sent!
                  </h3>
                  <p className="text-fog-300 leading-relaxed text-[15px] mb-7">
                    Thanks, {form.name || 'friend'}. We will reach you shortly.
                  </p>
                  <button
                    onClick={() => setSent(false)}
                    className="btn-primary inline-flex items-center gap-2"
                  >
                    Got it
                  </button>
                </div>
              </div>
            )}
          </form>
        </Reveal>
      </div>
    </section>
  );
}

function Label({ children }) {
  return <div className="text-[11px] font-mono uppercase tracking-[0.18em] text-fog-400">{children}</div>;
}

function Field({ label, value, onChange, placeholder, type = 'text', required }) {
  return (
    <label className="flex flex-col gap-2">
      <Label>{label}{required && <span style={{ color: 'var(--accent)' }}> *</span>}</Label>
      <input
        type={type}
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        required={required}
        className="rounded-2xl px-4 py-3 text-[13.5px] text-fog-100 placeholder:text-fog-500 outline-none transition-all"
        style={{
          background: 'rgba(255,255,255,0.04)',
          border: '1px solid rgba(255,255,255,0.08)',
        }}
        onFocus={(e) => e.target.style.borderColor = 'rgba(255,255,255,0.2)'}
        onBlur={(e) => e.target.style.borderColor = 'rgba(255,255,255,0.08)'}
      />
    </label>
  );
}

Object.assign(window, { Pricing, Contact });