// MailFlo — Simple Thank You Mail Platform
const { useState, useRef, useEffect } = React;

// ── Data ───────────────────────────────────────────────────────────
const TEMPLATES = [
  {
    id: 'new-customer',
    label: 'New Customer Thank You',
    sub: 'First time working together',
    emoji: '🤝',
    generate: (f) =>
`Hi ${f.name || 'there'},

Thank you for choosing us for your ${f.service || 'recent service'}${f.serviceDate ? ` on ${fmtDate(f.serviceDate)}` : ''}. It was a real pleasure!

Your experience means everything to us. We pride ourselves on top-quality work and hope we exceeded your expectations.

If you ever need us again, don't hesitate to reach out. We look forward to serving you!

With gratitude,
[Your Name]
[Your Company]
[Your Phone]`
  },
  {
    id: 'competitor-switch',
    label: 'Switched From Competitor',
    sub: 'Made the switch to your company',
    emoji: '🏆',
    generate: (f) =>
`Hi ${f.name || 'there'},

Thank you for trusting us with your ${f.service || 'service needs'}${f.serviceDate ? ` on ${fmtDate(f.serviceDate)}` : ''}. We know switching providers is a big decision — we're honored you chose us.

We're committed to showing you every day why you made the right call. Welcome to the family!

Best,
[Your Name]
[Your Company]
[Your Phone]`
  },
  {
    id: 'commercial',
    label: 'Commercial Customer',
    sub: 'Business or commercial account',
    emoji: '🏢',
    generate: (f) =>
`Dear ${f.name || 'Valued Customer'},

Thank you for trusting us with your ${f.service || 'service'}${f.serviceDate ? ` on ${fmtDate(f.serviceDate)}` : ''}. We genuinely appreciate the opportunity to serve your business.

Reliable, on-time service is what we're built for. Our team is dedicated to minimizing disruptions and delivering professional results every time.

We look forward to being your trusted partner.

Best regards,
[Your Name]
[Your Company]
[Your Phone]`
  },
  {
    id: 'referral',
    label: 'Referral Thank You',
    sub: 'Customer came through a referral',
    emoji: '⭐',
    generate: (f) =>
`Hi ${f.name || 'there'},

Thank you for choosing us — and a big thank you to whoever sent you our way! Referrals are the highest compliment we can receive.

We completed your ${f.service || 'service'}${f.serviceDate ? ` on ${fmtDate(f.serviceDate)}` : ''} and hope everything went perfectly. If you're happy with our work, please feel free to pass our name along!

Gratefully,
[Your Name]
[Your Company]
[Your Phone]`
  },
];

const SERVICE_TYPES = [
  'HVAC Tune-Up', 'AC Installation', 'Furnace Repair', 'Duct Cleaning',
  'Plumbing Repair', 'Electrical Inspection', 'Roofing Repair / Replacement',
  'Pest Control', 'Landscaping', 'Propane Delivery', 'General Service', 'Other',
];

const RECENT = [
  { name: 'Sarah Johnson',   service: 'HVAC Tune-Up',     date: 'May 22, 2026', status: 'sent' },
  { name: 'Marcus Williams', service: 'AC Installation',   date: 'May 20, 2026', status: 'sent' },
  { name: 'Emily Chen',      service: 'Furnace Repair',    date: 'May 18, 2026', status: 'saved' },
];

// ── Postcard Image Styles ──────────────────────────────────────────
const POSTCARD_IMAGES = [
  {
    id: 'elegant',
    label: 'Elegant',
    imgSrc: 'assets/templates/template-elegant.jpg',
    thumb: () => <img src="assets/templates/template-elegant.jpg" style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }} />,
    bg: '#F0E6D8',
    stripe: 'none',
    accent: '#C4956A', textColor: '#3D2314', subColor: '#8B6347', divider: 'rgba(196,149,106,0.2)',
  },
  {
    id: 'nature',
    label: 'Nature',
    imgSrc: 'assets/templates/template-nature.jpg',
    thumb: () => <img src="assets/templates/template-nature.jpg" style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }} />,
    bg: '#1E3A2F',
    stripe: 'none',
    accent: '#F5A623', textColor: '#FFFFFF', subColor: 'rgba(255,255,255,0.7)', divider: 'rgba(255,255,255,0.15)',
  },
  {
    id: 'rustic',
    label: 'Rustic',
    imgSrc: 'assets/templates/template-rustic.jpg',
    thumb: () => <img src="assets/templates/template-rustic.jpg" style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }} />,
    bg: '#2A1F14',
    stripe: 'none',
    accent: '#C8A96E', textColor: '#FFFFFF', subColor: 'rgba(255,255,255,0.65)', divider: 'rgba(200,169,110,0.2)',
  },
  {
    id: 'custom',
    label: 'Your Photo',
    thumb: null,
    bg: '#10141f',
    stripe: 'rgba(255,255,255,0.2)',
    accent: '#F8FAFC', textColor: '#F8FAFC', subColor: 'rgba(255,255,255,0.5)', divider: 'rgba(255,255,255,0.18)',
  },
];

// ── Helpers ────────────────────────────────────────────────────────
function fmtDate(d) {
  try { return new Date(d + 'T12:00:00').toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }); }
  catch { return d; }
}

function initials(name) {
  return (name || '?').trim().split(/\s+/).map(w => w[0]).join('').slice(0, 2).toUpperCase();
}

// ── Inline SVG icons ───────────────────────────────────────────────
const Ico = ({ size = 16, children, style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke="currentColor" strokeWidth="2" strokeLinecap="round"
    strokeLinejoin="round" style={style}>{children}</svg>
);

const IcoMail    = p => <Ico {...p}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></Ico>;
const IcoCard    = p => <Ico {...p}><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></Ico>;
const IcoSend    = p => <Ico {...p}><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></Ico>;
const IcoSave    = p => <Ico {...p}><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"/><path d="M7 3v4a1 1 0 0 0 1 1h7"/></Ico>;
const IcoCheck   = p => <Ico {...p}><polyline points="20 6 9 17 4 12"/></Ico>;
const IcoLeft    = p => <Ico {...p}><polyline points="15 18 9 12 15 6"/></Ico>;
const IcoX       = p => <Ico {...p}><path d="M18 6 6 18M6 6l12 12"/></Ico>;
const IcoCopy    = p => <Ico {...p}><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></Ico>;

// ── Logo ───────────────────────────────────────────────────────────
function Logo({ size = 34 }) {
  const h = size * 1.2;
  const w = h * (820 / 220); // aspect ratio of the logo image
  return (
    <img src="assets/logo.png" alt="MailFlo" style={{ height: h, width: 'auto', display: 'block', userSelect: 'none' }} />
  );
}

// ── Step Indicator ─────────────────────────────────────────────────
const STEP_LABELS = ['Customer Info', 'Choose Template', 'Preview & Send'];

function Steps({ step }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 28 }}>
      {STEP_LABELS.map((label, i) => {
        const n = i + 1, done = step > n, active = step === n;
        return (
          <React.Fragment key={n}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5 }}>
              <div style={{
                width: 30, height: 30, borderRadius: '50%', fontSize: 12, fontWeight: 700,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: done ? '#0057FF' : active ? 'rgba(0,87,255,0.2)' : 'rgba(255,255,255,0.04)',
                border: `2px solid ${done || active ? '#0057FF' : 'rgba(255,255,255,0.1)'}`,
                color: done || active ? (done ? '#fff' : '#00A3FF') : '#334155',
                transition: 'all 0.2s',
              }}>
                {done ? <IcoCheck size={13} /> : n}
              </div>
              <span style={{
                fontSize: 10, fontWeight: active ? 700 : 400,
                color: active ? '#94A3B8' : '#334155', whiteSpace: 'nowrap',
              }}>{label}</span>
            </div>
            {i < 2 && (
              <div style={{
                width: 48, height: 2, marginBottom: 18, flexShrink: 0, mx: 0,
                background: step > n ? '#0057FF' : 'rgba(255,255,255,0.07)',
                transition: 'background 0.3s',
              }} />
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
}

// ── Field label ────────────────────────────────────────────────────
function Label({ children, required }) {
  return (
    <label style={{
      display: 'block', fontSize: 11, fontWeight: 700, letterSpacing: '0.06em',
      textTransform: 'uppercase', color: '#475569', marginBottom: 6,
    }}>
      {children}{required && <span style={{ color: '#0057FF', marginLeft: 2 }}>*</span>}
    </label>
  );
}

// ── Shared input style ─────────────────────────────────────────────
const inputStyle = {
  width: '100%', padding: '11px 14px', borderRadius: 9,
  background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.09)',
  color: '#F8FAFC', fontSize: 14, outline: 'none',
  transition: 'border-color 0.15s',
};

function Input({ value, onChange, type = 'text', placeholder, onFocus, onBlur }) {
  const [focused, setFocused] = useState(false);
  return (
    <input
      type={type} value={value} onChange={onChange} placeholder={placeholder}
      style={{ ...inputStyle, borderColor: focused ? '#0057FF' : 'rgba(255,255,255,0.09)' }}
      onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}
    />
  );
}

// ── Address Autocomplete ───────────────────────────────────────────
const STATE_ABBR = {
  'Alabama':'AL','Alaska':'AK','Arizona':'AZ','Arkansas':'AR','California':'CA',
  'Colorado':'CO','Connecticut':'CT','Delaware':'DE','Florida':'FL','Georgia':'GA',
  'Hawaii':'HI','Idaho':'ID','Illinois':'IL','Indiana':'IN','Iowa':'IA',
  'Kansas':'KS','Kentucky':'KY','Louisiana':'LA','Maine':'ME','Maryland':'MD',
  'Massachusetts':'MA','Michigan':'MI','Minnesota':'MN','Mississippi':'MS','Missouri':'MO',
  'Montana':'MT','Nebraska':'NE','Nevada':'NV','New Hampshire':'NH','New Jersey':'NJ',
  'New Mexico':'NM','New York':'NY','North Carolina':'NC','North Dakota':'ND','Ohio':'OH',
  'Oklahoma':'OK','Oregon':'OR','Pennsylvania':'PA','Rhode Island':'RI','South Carolina':'SC',
  'South Dakota':'SD','Tennessee':'TN','Texas':'TX','Utah':'UT','Vermont':'VT',
  'Virginia':'VA','Washington':'WA','West Virginia':'WV','Wisconsin':'WI','Wyoming':'WY',
  'District of Columbia':'DC'
};

function AddressAutocomplete({ value, onChange }) {
  const [suggestions, setSuggestions] = useState([]);
  const [open, setOpen] = useState(false);
  const [focused, setFocused] = useState(false);
  const timerRef = useRef(null);
  const wrapRef = useRef(null);

  useEffect(() => {
    function handleClick(e) {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
    }
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, []);

  function handleChange(e) {
    const val = e.target.value;
    onChange(val);
    clearTimeout(timerRef.current);
    if (val.length < 5) { setSuggestions([]); setOpen(false); return; }
    timerRef.current = setTimeout(async () => {
      try {
        const url = `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(val)}&format=json&addressdetails=1&countrycodes=us&limit=5`;
        const res = await fetch(url, { headers: { 'Accept-Language': 'en' } });
        const data = await res.json();
        const formatted = data.map(item => {
          const a = item.address || {};
          const num = a.house_number || '';
          const road = a.road || '';
          const city = a.city || a.town || a.village || a.county || '';
          const state = STATE_ABBR[a.state] || a.state || '';
          const zip = a.postcode ? a.postcode.split('-')[0] : '';
          const line1 = [num, road].filter(Boolean).join(' ');
          if (!line1 || !city || !state || !zip) return null;
          return `${line1}, ${city}, ${state} ${zip}`;
        }).filter(Boolean);
        const unique = [...new Set(formatted)];
        setSuggestions(unique);
        setOpen(unique.length > 0);
      } catch { setSuggestions([]); setOpen(false); }
    }, 350);
  }

  function select(addr) {
    onChange(addr);
    setSuggestions([]);
    setOpen(false);
  }

  return (
    <div ref={wrapRef} style={{ position: 'relative' }}>
      <input
        type="text" value={value} onChange={handleChange}
        placeholder="123 Main St, City, State 12345"
        autoComplete="off"
        style={{ ...inputStyle, borderColor: focused ? '#0057FF' : 'rgba(255,255,255,0.09)' }}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
      />
      {open && suggestions.length > 0 && (
        <div style={{
          position: 'absolute', top: '100%', left: 0, right: 0, zIndex: 999,
          background: '#131929', border: '1px solid rgba(255,255,255,0.12)',
          borderRadius: 8, marginTop: 4, overflow: 'hidden',
          boxShadow: '0 8px 32px rgba(0,0,0,0.5)',
        }}>
          {suggestions.map((s, i) => (
            <div key={i}
              onMouseDown={() => select(s)}
              style={{
                padding: '10px 14px', fontSize: 13, color: '#CBD5E1', cursor: 'pointer',
                borderBottom: i < suggestions.length - 1 ? '1px solid rgba(255,255,255,0.06)' : 'none',
                transition: 'background 0.1s',
              }}
              onMouseEnter={e => e.currentTarget.style.background = 'rgba(0,87,255,0.15)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              📍 {s}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ── Step 1: Customer Info ──────────────────────────────────────────
function StepInfo({ form, set, onNext, onClose }) {
  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 540);
  useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth < 540);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return (
    <div className="fade-up">
      <Steps step={1} />
      <div style={{ textAlign: 'center', marginBottom: 24 }}>
        <h2 style={{ fontSize: 20, fontWeight: 800, color: '#F8FAFC', marginBottom: 4 }}>Customer Information</h2>
        <p style={{ fontSize: 13, color: '#475569' }}>Enter their details to personalize the message</p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        {/* Name */}
        <div>
          <Label required>Customer Name</Label>
          <Input value={form.name} onChange={e => set('name', e.target.value)} placeholder="Jane Smith" />
        </div>
        {/* Email */}
        <div>
          <Label>Email Address</Label>
          <Input type="email" value={form.email} onChange={e => set('email', e.target.value)} placeholder="jane@example.com" />
        </div>
        {/* Phone */}
        <div>
          <Label>Phone Number</Label>
          <Input type="tel" value={form.phone} onChange={e => set('phone', e.target.value)} placeholder="(555) 123-4567" />
        </div>
        {/* Company */}
        <div>
          <Label>Company Name</Label>
          <Input value={form.company} onChange={e => set('company', e.target.value)} placeholder="ABC Business (optional)" />
        </div>
        {/* Address + Date row */}
        <div style={{ gridColumn: '1 / -1', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '3fr 2fr', gap: 14 }}>
          <div>
            <Label>Mailing Address</Label>
            <AddressAutocomplete value={form.address} onChange={v => set('address', v)} />
          </div>
          <div>
            <Label>Service Date</Label>
            <input
              type="date" value={form.serviceDate}
              onChange={e => set('serviceDate', e.target.value)}
              max={new Date().toISOString().split('T')[0]}
              style={{ ...inputStyle, colorScheme: 'dark', maxWidth: isMobile ? 160 : '100%' }}
            />
          </div>
        </div>
        {/* Service type */}
        <div style={{ gridColumn: '1 / -1' }}>
          <Label>Service Type</Label>
          <SelectField value={form.service} onChange={v => set('service', v)} placeholder="Select service…" options={SERVICE_TYPES} />
        </div>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 24, gap: 10 }}>
        <button onClick={onClose}
          style={{ padding: '10px 18px', borderRadius: 8, background: 'transparent', border: '1px solid rgba(255,255,255,0.09)', color: '#475569', fontSize: 13, cursor: 'pointer', fontFamily: 'inherit' }}>
          Cancel
        </button>
        <button onClick={onNext} disabled={!form.name}
          className="btn-glow"
          style={{ padding: '12px 28px', borderRadius: 10, fontSize: 14, fontWeight: 700, fontFamily: 'inherit', opacity: form.name ? 1 : 0.4 }}>
          Choose Template →
        </button>
      </div>
    </div>
  );
}

// ── Step 2: Template ───────────────────────────────────────────────
function StepTemplate({ form, set, onNext, onBack }) {
  const fileRef = useRef(null);
  const [savedImages, setSavedImages] = useState(() => {
    try { return JSON.parse(localStorage.getItem('mf_postcard_lib') || '[]'); } catch { return []; }
  });

  function handleUpload(e) {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = ev => {
      const dataUrl = ev.target.result;
      const label = (file.name.replace(/\.[^.]+$/, '') || 'Photo').slice(0, 18);
      const newImg = { id: 'lib_' + Date.now(), label, dataUrl };
      setSavedImages(prev => {
        const next = [...prev, newImg];
        try { localStorage.setItem('mf_postcard_lib', JSON.stringify(next)); } catch {}
        return next;
      });
      set('postcardCustomImage', dataUrl);
      set('postcardImage', 'custom');
    };
    reader.readAsDataURL(file);
    e.target.value = '';
  }

  function deleteLibImage(id) {
    const img = savedImages.find(i => i.id === id);
    const next = savedImages.filter(i => i.id !== id);
    setSavedImages(next);
    try { localStorage.setItem('mf_postcard_lib', JSON.stringify(next)); } catch {}
    if (img && form.postcardCustomImage === img.dataUrl) {
      set('postcardImage', 'elegant');
      set('postcardCustomImage', '');
    }
  }

  return (
    <div className="fade-up">
      <Steps step={2} />
      <div style={{ textAlign: 'center', marginBottom: 24 }}>
        <h2 style={{ fontSize: 20, fontWeight: 800, color: '#F8FAFC', marginBottom: 4 }}>Choose a Template</h2>
        <p style={{ fontSize: 13, color: '#475569' }}>Pick the one that fits this customer best</p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {TEMPLATES.map(t => {
          const sel = form.template === t.id;
          return (
            <button key={t.id} type="button" onClick={() => set('template', t.id)}
              style={{
                padding: '18px 16px', borderRadius: 12, textAlign: 'left', cursor: 'pointer',
                background: sel ? 'rgba(0,87,255,0.14)' : 'rgba(255,255,255,0.03)',
                border: `1.5px solid ${sel ? '#0057FF' : 'rgba(255,255,255,0.08)'}`,
                fontFamily: 'inherit', transition: 'all 0.15s', position: 'relative',
              }}>
              {sel && (
                <div style={{
                  position: 'absolute', top: 10, right: 10, width: 20, height: 20,
                  borderRadius: '50%', background: '#0057FF',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',
                }}><IcoCheck size={11} /></div>
              )}
              <div style={{ fontSize: 28, marginBottom: 9 }}>{t.emoji}</div>
              <div style={{ fontSize: 13.5, fontWeight: 700, color: '#F8FAFC', marginBottom: 3 }}>{t.label}</div>
              <div style={{ fontSize: 12, color: '#475569', lineHeight: 1.4 }}>{t.sub}</div>
            </button>
          );
        })}
      </div>

      {/* Postcard image picker */}
      <div style={{ marginTop: 22 }}>
        <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', color: '#1E2D45', textTransform: 'uppercase', marginBottom: 10 }}>Postcard Image Style</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 }}>

          {/* Built-in styles (first 3) */}
          {POSTCARD_IMAGES.slice(0, 3).map(img => {
            const sel = form.postcardImage === img.id;
            return (
              <button key={img.id} type="button"
                onClick={() => { set('postcardImage', img.id); set('postcardCustomImage', ''); }}
                style={{ padding: 0, borderRadius: 10, overflow: 'hidden', cursor: 'pointer', background: 'none',
                  border: `2px solid ${sel ? '#0057FF' : 'rgba(255,255,255,0.07)'}`,
                  transition: 'border-color 0.15s', position: 'relative',
                }}>
                <div style={{ aspectRatio: '3/2', position: 'relative', overflow: 'hidden' }}>
                  {img.thumb()}
                </div>
                <div style={{ padding: '6px 4px', background: sel ? 'rgba(0,87,255,0.14)' : 'rgba(255,255,255,0.03)', fontSize: 11, fontWeight: sel ? 700 : 500, color: sel ? '#F8FAFC' : '#475569', textAlign: 'center' }}>
                  {img.label}
                </div>
                {sel && (
                  <div style={{ position: 'absolute', top: 6, right: 6, width: 18, height: 18, borderRadius: '50%', background: '#0057FF', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <IcoCheck size={10} style={{ color: '#fff' }} />
                  </div>
                )}
              </button>
            );
          })}

          {/* Saved library images */}
          {savedImages.map(img => {
            const sel = form.postcardImage === 'custom' && form.postcardCustomImage === img.dataUrl;
            return (
              <button key={img.id} type="button"
                onClick={() => { set('postcardImage', 'custom'); set('postcardCustomImage', img.dataUrl); }}
                style={{ padding: 0, borderRadius: 10, overflow: 'hidden', cursor: 'pointer', background: 'none',
                  border: `2px solid ${sel ? '#0057FF' : 'rgba(255,255,255,0.12)'}`,
                  transition: 'border-color 0.15s', position: 'relative',
                }}>
                <div style={{ aspectRatio: '3/2', position: 'relative', overflow: 'hidden' }}>
                  <div style={{ width:'100%', height:'100%', backgroundImage:`url(${img.dataUrl})`, backgroundSize:'cover', backgroundPosition:'center' }} />
                  <button type="button" onClick={e => { e.stopPropagation(); deleteLibImage(img.id); }}
                    style={{ position:'absolute', top:4, left:4, width:16, height:16, borderRadius:'50%', background:'rgba(0,0,0,0.65)', border:'1px solid rgba(255,255,255,0.22)', color:'#94A3B8', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', fontSize:9, fontFamily:'inherit', lineHeight:1 }}>
                    ✕
                  </button>
                </div>
                <div style={{ padding: '6px 4px', background: sel ? 'rgba(0,87,255,0.14)' : 'rgba(255,255,255,0.03)', fontSize: 11, fontWeight: sel ? 700 : 500, color: sel ? '#F8FAFC' : '#475569', textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {img.label}
                </div>
                {sel && (
                  <div style={{ position: 'absolute', top: 6, right: 6, width: 18, height: 18, borderRadius: '50%', background: '#0057FF', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <IcoCheck size={10} style={{ color: '#fff' }} />
                  </div>
                )}
              </button>
            );
          })}

          {/* Upload New tile */}
          <button type="button" onClick={() => fileRef.current?.click()}
            style={{ padding: 0, borderRadius: 10, overflow: 'hidden', cursor: 'pointer', background: 'none',
              border: '2px dashed rgba(255,255,255,0.13)', transition: 'border-color 0.15s',
            }}>
            <div style={{ aspectRatio: '3/2', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 5, background: 'rgba(255,255,255,0.02)' }}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.22)" strokeWidth="1.5" strokeLinecap="round">
                <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/>
                <polyline points="21 15 16 10 5 21"/>
                <line x1="12" y1="5" x2="12" y2="11"/><line x1="9" y1="8" x2="15" y2="8"/>
              </svg>
            </div>
            <div style={{ padding: '6px 4px', background: 'rgba(255,255,255,0.02)', fontSize: 11, fontWeight: 600, color: '#334155', textAlign: 'center' }}>
              + Upload Photo
            </div>
          </button>

          <input ref={fileRef} type="file" accept="image/*" style={{ display:'none' }} onChange={handleUpload} />
        </div>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 24, gap: 10 }}>
        <button onClick={onBack}
          style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '10px 18px', borderRadius: 8, background: 'transparent', border: '1px solid rgba(255,255,255,0.09)', color: '#475569', fontSize: 13, cursor: 'pointer', fontFamily: 'inherit' }}>
          <IcoLeft size={14} /> Back
        </button>
        <button onClick={onNext} disabled={!form.template}
          className="btn-glow"
          style={{ padding: '12px 28px', borderRadius: 10, fontSize: 14, fontWeight: 700, fontFamily: 'inherit', opacity: form.template ? 1 : 0.4 }}>
          Generate Message →
        </button>
      </div>
    </div>
  );
}

// ── Stripe ────────────────────────────────────────────────────────
const STRIPE_PUBLISHABLE_KEY = 'pk_live_nQdM8HaYQpf8fx8VDhYgbvcJ';
const POSTCARD_PRICE = 4.99;

// ── Supabase ──────────────────────────────────────────────────────
// TODO: Replace with your project values from supabase.com → Project Settings → API
const SUPABASE_URL      = 'https://fvucrtaewacbjbkeaumk.supabase.co';
const SUPABASE_ANON_KEY = 'sb_publishable_O9mLbdkdl6VUyGcIQOaJuw_GbS7wtIP';
let sb = null;
try {
  if (typeof window !== 'undefined' && window.supabase &&
      SUPABASE_URL !== 'YOUR_SUPABASE_PROJECT_URL') {
    sb = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
  }
} catch(e) { console.warn('Supabase init skipped:', e.message); }

// ── Lob helpers ───────────────────────────────────────────────────
function parseAddress(str) {
  if (!str) return null;
  str = str.trim();
  const parts = str.split(',').map(s => s.trim()).filter(Boolean);

  // "123 Main St, City, ST 12345"
  if (parts.length >= 3) {
    const m = parts[parts.length - 1].match(/^([A-Za-z]{2})\s+(\d{5}(?:-\d{4})?)$/);
    if (m) return { address_line1: parts.slice(0, parts.length - 2).join(', '), address_city: parts[parts.length - 2], address_state: m[1].toUpperCase(), address_zip: m[2] };
  }

  // "123 Main St, City ST 12345"
  if (parts.length >= 2) {
    const m = parts[parts.length - 1].match(/^(.+?)\s+([A-Za-z]{2})\s+(\d{5}(?:-\d{4})?)$/);
    if (m) return { address_line1: parts.slice(0, parts.length - 1).join(', '), address_city: m[1].trim(), address_state: m[2].toUpperCase(), address_zip: m[3] };
  }

  // "123 Main St City ST 12345" — no commas at all
  const words = str.split(/\s+/);
  const zipIdx = words.findIndex(w => /^\d{5}(?:-\d{4})?$/.test(w));
  if (zipIdx >= 3) {
    const state = words[zipIdx - 1];
    if (/^[A-Za-z]{2}$/.test(state)) {
      return { address_line1: words.slice(0, zipIdx - 2).join(' '), address_city: words[zipIdx - 2], address_state: state.toUpperCase(), address_zip: words[zipIdx] };
    }
  }

  return null;
}

const LOB_TEMPLATES_BASE = 'https://mailflo.vercel.app/assets/templates/';

function buildLobFrontHtml(pcImg, customImage) {
  // Named image templates: full-bleed photo only, no text overlay
  if (pcImg.imgSrc) {
    const imgUrl = LOB_TEMPLATES_BASE + pcImg.imgSrc.split('/').pop();
    return `<!DOCTYPE html><html><head><style>*{margin:0;padding:0;box-sizing:border-box;}body{width:6.25in;height:4.25in;overflow:hidden;}img{width:100%;height:100%;object-fit:cover;display:block;}</style></head><body><img src="${imgUrl}"/></body></html>`;
  }

  // Custom uploaded photo: full-bleed, no text overlay
  if (customImage) {
    return `<!DOCTYPE html><html><head><style>*{margin:0;padding:0;box-sizing:border-box;}body{width:6.25in;height:4.25in;overflow:hidden;background:#05070B;background-image:url(${customImage});background-size:cover;background-position:center;}</style></head><body></body></html>`;
  }

  // Fallback dark card (no image selected)
  return `<!DOCTYPE html><html><head><style>
* { margin:0; padding:0; box-sizing:border-box; }
body { width:6.25in; height:4.25in; font-family:Arial,sans-serif; overflow:hidden; background:#05070B; }
.stripe { position:absolute; top:0; left:0; right:0; height:14px; background:linear-gradient(90deg,#0043CC,#0057FF,#00A3FF); }
.footer { position:absolute; bottom:18px; right:28px; font-size:7pt; font-weight:700; letter-spacing:0.12em; color:rgba(255,255,255,0.2); text-transform:uppercase; }
</style></head><body><div class="stripe"></div><div class="footer">MAILFLO.COM</div></body></html>`;
}

function buildLobBackHtml(form, message) {
  const lines = message.split('\n').map(l => l.replace(/</g,'&lt;').replace(/>/g,'&gt;')).join('<br>');
  const addrParts = (form.address || '').split(',').map(s => s.trim());

  return `<!DOCTYPE html><html><head><style>
* { margin:0; padding:0; box-sizing:border-box; }
body { width:6.25in; height:4.25in; font-family:Arial,sans-serif; background:#FFFFFF; overflow:hidden; }
.wrap { display:flex; height:100%; }
.msg-side { flex:1; padding:0.3in 0.25in; display:flex; flex-direction:column; border-right:1px dashed #ccc; }
.msg-body { font-size:8pt; color:#1e293b; line-height:1.55; flex:1; overflow:hidden; }
.msg-footer { font-size:6pt; font-weight:700; letter-spacing:0.14em; color:#cbd5e1; text-transform:uppercase; margin-top:8px; }
.addr-side { width:2.2in; padding:0.3in 0.2in; display:flex; flex-direction:column; }
.stamp { width:0.7in; height:0.9in; border:1px solid #cbd5e1; border-radius:3px; margin-left:auto; margin-bottom:0.2in; }
.to-label { font-size:6pt; font-weight:700; color:#94a3b8; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:6px; }
.to-name { font-size:9pt; font-weight:700; color:#0f172a; margin-bottom:4px; }
.to-addr { font-size:8pt; color:#334155; line-height:1.5; }
</style></head><body>
<div class="wrap">
  <div class="msg-side">
    <div class="msg-body">${lines}</div>
    <div class="msg-footer">MAILFLO.COM</div>
  </div>
  <div class="addr-side">
    <div class="stamp"></div>
    <div class="to-label">Send To</div>
    <div class="to-name">${(form.name || '').replace(/</g,'&lt;')}</div>
    <div class="to-addr">${addrParts.map(p => p.replace(/</g,'&lt;')).join('<br>')}</div>
  </div>
</div>
</body></html>`;
}

function buildLobZoomBackHtml(form, message, sender) {
  const lines = message.split('\n').map(l => l.replace(/</g,'&lt;').replace(/>/g,'&gt;')).join('<br>');
  const addrParts = (form.address || '').split(',').map(s => s.trim());
  const senderName = sender ? sender.name : (form.company || 'YOUR COMPANY');
  const senderLine2 = sender ? sender.address_line1 : 'RETURN ADDRESS';
  const senderLine3 = sender ? `${sender.address_city}, ${sender.address_state} ${sender.address_zip}` : 'CITY, ST 00000';

  // IMb-style barcode as SVG
  const barTypes = [0,1,2,3,0,1,3,2,1,0,3,2,0,1,2,3,1,0,2,3,0,1,3,2,1,0,3,1,2,0,2,3,0,1,3,2,1,0,3,1,0,2,3,2,1,0,2,1,3,0,3,2,1,0,3,0,2,1,3,2,1,0,3,2];
  const barSvg = `<svg viewBox="0 0 130 24" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:28px;display:block;">
    ${barTypes.map((t,i) => {
      const x = i * 2 + 0.5;
      const [y,h] = t===0?[0,24]:t===1?[0,15]:t===2?[9,15]:[6,12];
      return `<rect x="${x}" y="${y}" width="1.2" height="${h}" fill="#111"/>`;
    }).join('')}
  </svg>`;

  return `<!DOCTYPE html><html><head><style>
* { margin:0; padding:0; box-sizing:border-box; }
body { width:6.25in; height:4.25in; font-family:Arial,sans-serif; background:#fff; overflow:hidden; }
.wrap { display:flex; height:100%; }
.msg-side { flex:1; padding:0.28in 0.22in; display:flex; flex-direction:column; border-right:1px dashed #ccc; overflow:hidden; }
.msg-body { font-size:8pt; color:#1e293b; line-height:1.55; flex:1; overflow:hidden; }
.msg-footer { font-size:6pt; font-weight:700; letter-spacing:0.14em; color:#cbd5e1; text-transform:uppercase; margin-top:8px; flex-shrink:0; }
.addr-side { width:2.2in; padding:0.18in 0.15in; display:flex; flex-direction:column; flex-shrink:0; }
.top-row { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:0.1in; }
.sender { font-size:6.5pt; color:#1e293b; line-height:1.55; }
.sender-name { font-weight:700; font-size:7pt; }
.indicia { width:0.85in; height:0.65in; border:1.5px solid #374151; border-radius:2px; flex-shrink:0; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:3px; }
.indicia-line { font-size:5pt; font-weight:900; letter-spacing:0.06em; color:#374151; text-transform:uppercase; text-align:center; line-height:1.5; }
.barcode { margin:0.07in 0 0.1in; }
.to-name { font-size:9pt; font-weight:700; color:#0f172a; margin-bottom:3px; }
.to-company { font-size:8pt; color:#374151; margin-bottom:2px; }
.to-addr { font-size:8pt; color:#374151; line-height:1.5; }
</style></head><body>
<div class="wrap">
  <div class="msg-side">
    <div class="msg-body">${lines}</div>
    <div class="msg-footer">MAILFLO.COM</div>
  </div>
  <div class="addr-side">
    <div class="top-row">
      <div class="sender">
        <div class="sender-name">${senderName.replace(/</g,'&lt;')}</div>
        <div>${senderLine2.replace(/</g,'&lt;')}</div>
        <div>${senderLine3.replace(/</g,'&lt;')}</div>
      </div>
      <div class="indicia">
        <div class="indicia-line">PRESORT<br>STANDARD<br>U.S. POSTAGE<br>PAID</div>
      </div>
    </div>
    <div class="barcode">${barSvg}</div>
    <div class="to-name">${(form.name || '').replace(/</g,'&lt;')}</div>
    ${form.company ? `<div class="to-company">${form.company.replace(/</g,'&lt;')}</div>` : ''}
    <div class="to-addr">${addrParts.map(p => p.replace(/</g,'&lt;')).join('<br>')}</div>
  </div>
</div>
</body></html>`;
}

// ── Payment Modal ─────────────────────────────────────────────────
function PaymentModal({ onSuccess, onClose, recipientName }) {
  const [clientSecret, setClientSecret] = useState('');
  const [stripeObj, setStripeObj] = useState(null);
  const [elements, setElements] = useState(null);
  const [loading, setLoading] = useState(false);
  const [initLoading, setInitLoading] = useState(true);
  const [error, setError] = useState('');
  const mountRef = useRef(null);

  useEffect(() => {
    if (!window.Stripe || STRIPE_PUBLISHABLE_KEY === 'YOUR_STRIPE_PUBLISHABLE_KEY') {
      setError('Stripe not configured yet.'); setInitLoading(false); return;
    }
    const s = window.Stripe(STRIPE_PUBLISHABLE_KEY);
    setStripeObj(s);
    fetch('/api/create-payment-intent', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ amount: POSTCARD_PRICE, description: `MailFlo postcard for ${recipientName}` }),
    })
      .then(r => r.json())
      .then(data => { setClientSecret(data.clientSecret); setInitLoading(false); })
      .catch(() => { setError('Failed to load payment form.'); setInitLoading(false); });
  }, []);

  useEffect(() => {
    if (!stripeObj || !clientSecret || !mountRef.current) return;
    const els = stripeObj.elements({ clientSecret, appearance: { theme: 'night', variables: { colorPrimary: '#0057FF', borderRadius: '8px' } } });
    const paymentEl = els.create('payment');
    paymentEl.mount(mountRef.current);
    setElements(els);
  }, [stripeObj, clientSecret]);

  async function handlePay() {
    if (!stripeObj || !elements) return;
    setLoading(true); setError('');
    const { error: stripeError } = await stripeObj.confirmPayment({
      elements,
      confirmParams: { return_url: window.location.href },
      redirect: 'if_required',
    });
    if (stripeError) { setError(stripeError.message); setLoading(false); }
    else { onSuccess(); }
  }

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.75)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}>
      <div className="fade-up" style={{ background: '#0D1626', borderRadius: 16, border: '1px solid rgba(255,255,255,0.1)', padding: '28px 24px', width: '100%', maxWidth: 420 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20 }}>
          <div>
            <h2 style={{ fontSize: 20, fontWeight: 800, color: '#F8FAFC', marginBottom: 4 }}>Complete Payment</h2>
            <p style={{ fontSize: 13, color: '#475569' }}>Postcard for <strong style={{ color: '#94A3B8' }}>{recipientName}</strong></p>
          </div>
          <div style={{ fontSize: 22, fontWeight: 900, color: '#F8FAFC' }}>${POSTCARD_PRICE.toFixed(2)}</div>
        </div>

        {initLoading && <div style={{ textAlign: 'center', padding: '32px 0', color: '#475569', fontSize: 13 }}>Loading payment form…</div>}
        {error && <div style={{ padding: '10px 14px', background: 'rgba(239,68,68,0.1)', border: '1px solid rgba(239,68,68,0.3)', borderRadius: 8, color: '#EF4444', fontSize: 13, marginBottom: 16 }}>{error}</div>}

        <div ref={mountRef} style={{ marginBottom: clientSecret ? 20 : 0 }} />

        <div style={{ display: 'flex', gap: 10, marginTop: 8 }}>
          <button onClick={onClose} disabled={loading}
            style={{ flex: 1, padding: '12px', borderRadius: 10, background: 'transparent', border: '1px solid rgba(255,255,255,0.09)', color: '#475569', fontSize: 14, cursor: 'pointer', fontFamily: 'inherit' }}>
            Cancel
          </button>
          <button onClick={handlePay} disabled={loading || initLoading || !!error} className="btn-glow"
            style={{ flex: 2, padding: '12px', borderRadius: 10, fontSize: 14, fontWeight: 700, fontFamily: 'inherit', opacity: (loading || initLoading || !!error) ? 0.6 : 1 }}>
            {loading ? 'Processing…' : `Pay $${POSTCARD_PRICE.toFixed(2)} & Send`}
          </button>
        </div>
      </div>
    </div>
  );
}

// ── Lob Preview (scaled iframe matching exact print dimensions) ─────
function LobPreview({ html, shadow }) {
  const LOB_W = 600, LOB_H = 408;
  const wrapRef = useRef(null);
  const [scale, setScale] = useState(1);

  useEffect(() => {
    function measure() {
      if (wrapRef.current) {
        const w = wrapRef.current.getBoundingClientRect().width;
        if (w > 0) setScale(w / LOB_W);
      }
    }
    measure();
    const ro = new ResizeObserver(measure);
    if (wrapRef.current) ro.observe(wrapRef.current);
    return () => ro.disconnect();
  }, []);

  return (
    <div ref={wrapRef} style={{ width: '100%' }}>
      <div style={{
        height: LOB_H * scale, position: 'relative', overflow: 'hidden',
        borderRadius: 10, background: '#fff',
        boxShadow: shadow ? '0 24px 60px rgba(0,0,0,0.6)' : 'none',
      }}>
        <iframe
          key={html.slice(0, 40)}
          srcDoc={html}
          scrolling="no"
          style={{
            border: 'none', position: 'absolute', top: 0, left: 0,
            width: LOB_W, height: LOB_H,
            transformOrigin: 'top left',
            transform: `scale(${scale})`,
            pointerEvents: 'none',
          }}
        />
      </div>
    </div>
  );
}

// ── Step 3: Preview & Send ─────────────────────────────────────────
function StepPreview({ form, onBack, onDone, user, session }) {
  const tpl = TEMPLATES.find(t => t.id === form.template);
  const [message, setMessage] = useState(() => tpl ? tpl.generate(form) : '');
  const [done, setDone]       = useState(null);
  const [handwritten, setHandwritten] = useState(false);
  const [fontSizeIdx, setFontSizeIdx] = useState(1);
  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 540);
  const [lobSender, setLobSender]   = useState(() => { try { return JSON.parse(localStorage.getItem('mf_lob_sender') || 'null'); } catch { return null; } });
  const [showLobSetup, setShowLobSetup] = useState(false);
  const [lobNameDraft, setLobNameDraft] = useState('');
  const [lobAddrDraft, setLobAddrDraft] = useState('');
  const [lobLoading, setLobLoading]     = useState(false);
  const [showPayment, setShowPayment]   = useState(false);
  const [zoomSide, setZoomSide]         = useState(null); // 'front' | 'back' | null

  useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth < 540);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  useEffect(() => {
    if (!sb || !user) return;
    sb.from('user_settings').select('*').single().then(({ data }) => {
      if (!data) return;
      if (data.sender_name) {
        const sender = { name: data.sender_name, address_line1: data.sender_addr1 || '', address_city: data.sender_city || '', address_state: data.sender_state || '', address_zip: data.sender_zip || '' };
        setLobSender(sender);
        try { localStorage.setItem('mf_lob_sender', JSON.stringify(sender)); } catch {}
      }
    });
  }, [user]);

  const MSG_MAX  = 420;
  const hwFont   = "'Caveat', cursive";
  const pcImg    = POSTCARD_IMAGES.find(i => i.id === form.postcardImage) || POSTCARD_IMAGES[0];
  const FS_NORMAL         = [11, 13, 16];
  const FS_HW             = [16, 19, 23];
  const FS_PREVIEW_NORMAL = [5, 6.5, 8];
  const FS_PREVIEW_HW     = [7.5, 9.5, 12];
  const activeFontSize   = handwritten ? FS_HW[fontSizeIdx] : FS_NORMAL[fontSizeIdx];
  const previewFontSize  = handwritten ? FS_PREVIEW_HW[fontSizeIdx] : FS_PREVIEW_NORMAL[fontSizeIdx];
  const charColor = message.length > MSG_MAX ? '#ef4444' : message.length > MSG_MAX * 0.85 ? '#f59e0b' : '#475569';

  function saveLobSettings() {
    const addr = parseAddress(lobAddrDraft);
    if (!addr || !lobNameDraft.trim()) return;
    const sender = { name: lobNameDraft.trim(), ...addr };
    try { localStorage.setItem('mf_lob_sender', JSON.stringify(sender)); } catch {}
    setLobSender(sender); setShowLobSetup(false);
    // Save to Supabase if logged in
    if (sb && user) {
      sb.from('user_settings').upsert({
        user_id: user.id,
        sender_name: sender.name,
        sender_addr1: sender.address_line1,
        sender_city: sender.address_city,
        sender_state: sender.address_state,
        sender_zip: sender.address_zip,
        updated_at: new Date().toISOString(),
      }, { onConflict: 'user_id' }).then(({ error }) => {
        if (error) console.error('Supabase save error:', error);
      });
    }
  }

  async function sendViaLob() {
    const toAddr = parseAddress(form.address);
    if (!toAddr) { alert('Check the mailing address format: 123 Main St, City, ST 12345'); return; }
    setLobLoading(true);
    try {
      let customImg = form.postcardImage === 'custom' ? form.postcardCustomImage : '';

      // If custom image is a base64 data URL, upload to Supabase Storage for a hosted URL
      if (customImg && customImg.startsWith('data:') && sb) {
        try {
          const [header, b64] = customImg.split(',');
          const mime = header.replace('data:', '').replace(';base64', '');
          const ext = mime.split('/')[1] || 'jpg';
          const fname = `pc-${Date.now()}.${ext}`;
          const binary = atob(b64);
          const bytes = new Uint8Array(binary.length);
          for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
          const { error: upErr } = await sb.storage.from('postcard-images').upload(fname, bytes, { contentType: mime, upsert: false });
          if (!upErr) {
            const { data: urlData } = sb.storage.from('postcard-images').getPublicUrl(fname);
            customImg = urlData.publicUrl;
          }
        } catch(e) { console.warn('Image upload failed:', e); }
      }

      const payload = {
        description: `Thank you postcard for ${form.name}`,
        to: {
          name: form.name,
          ...(form.company ? { company: form.company } : {}),
          address_line1: toAddr.address_line1,
          address_city:  toAddr.address_city,
          address_state: toAddr.address_state,
          address_zip:   toAddr.address_zip,
        },
        front: buildLobFrontHtml(pcImg, customImg),
        back:  buildLobBackHtml(form, message),
      };

      // Production: call Vercel API route (key stays server-side)
      // Dev fallback: call Lob directly with localStorage key
      const isLocalDev = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
      let res;
      if (!isLocalDev) {
        res = await fetch('/api/send-postcard', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            ...(session?.access_token ? { 'Authorization': `Bearer ${session.access_token}` } : {}),
          },
          body: JSON.stringify(payload),
        });
      } else {
        // Local dev fallback — also routes through API
        if (!lobSender) { setLobLoading(false); setShowLobSetup(true); return; }
        res = await fetch('/api/send-postcard', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            ...(session?.access_token ? { 'Authorization': `Bearer ${session.access_token}` } : {}),
          },
          body: JSON.stringify(payload),
        });
      }

      const data = await res.json();
      if (data.id) {
        setDone('postcard');
        // Save to history
        if (sb && user) {
          sb.from('postcard_history').insert({
            user_id: user.id,
            recipient_name: form.name,
            recipient_address: form.address,
            message: message,
            lob_id: data.id,
            template: form.postcardImage || 'default',
            status: 'sent',
          }).then(({ error }) => { if (error) console.error('History save error:', error); });
        }
      } else {
        alert('Lob error: ' + (data.error?.message || JSON.stringify(data).slice(0, 200)));
      }
    } catch(e) { alert('Network error: ' + e.message); }
    setLobLoading(false);
  }

  if (done) {
    return (
      <div className="fade-up" style={{ textAlign: 'center', padding: '32px 16px' }}>
        <div style={{
          width: 68, height: 68, borderRadius: '50%', margin: '0 auto 18px',
          background: 'rgba(16,185,129,0.12)', border: '2px solid rgba(16,185,129,0.4)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#10B981', fontSize: 28,
        }}>✓</div>
        <h2 style={{ fontSize: 22, fontWeight: 800, color: '#F8FAFC', marginBottom: 8 }}>
          Thank You Sent!
        </h2>
        <p style={{ fontSize: 14, color: '#475569', marginBottom: 32, maxWidth: 340, margin: '0 auto 32px' }}>
          Postcard queued for {form.name}. Expected delivery in 5–7 business days.
        </p>
        <button onClick={onDone} className="btn-glow"
          style={{ padding: '14px 36px', borderRadius: 12, fontSize: 15, fontWeight: 800, fontFamily: 'inherit' }}>
          ✉️ Send Another Thank You
        </button>
      </div>
    );
  }

  // Business setup modal — shown when sender info is missing
  if (showLobSetup) {
    return (
      <div className="fade-up" style={{ maxWidth: 440, margin: '0 auto', padding: '16px 0' }}>
        <Steps step={3} />
        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <div style={{ fontSize: 32, marginBottom: 12 }}>📬</div>
          <h2 style={{ fontSize: 20, fontWeight: 800, color: '#F8FAFC', marginBottom: 6 }}>One-time setup</h2>
          <p style={{ fontSize: 13, color: '#475569' }}>Enter your business name and return address. This appears on every postcard you send.</p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div>
            <label style={{ fontSize: 11, fontWeight: 700, color: '#475569', letterSpacing: '0.08em', textTransform: 'uppercase', display: 'block', marginBottom: 6 }}>Business Name</label>
            <input value={lobNameDraft} onChange={e => setLobNameDraft(e.target.value)} placeholder="Your Company Name"
              style={{ ...inputStyle, width: '100%' }} />
          </div>
          <div>
            <label style={{ fontSize: 11, fontWeight: 700, color: '#475569', letterSpacing: '0.08em', textTransform: 'uppercase', display: 'block', marginBottom: 6 }}>Return Address</label>
            <input value={lobAddrDraft} onChange={e => setLobAddrDraft(e.target.value)} placeholder="123 Main St, City, ST 12345"
              style={{ ...inputStyle, width: '100%' }} />
          </div>
          <button onClick={saveLobSettings} className="btn-glow"
            style={{ padding: '14px', borderRadius: 10, fontSize: 14, fontWeight: 700, fontFamily: 'inherit', marginTop: 4 }}>
            Save & Continue →
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="fade-up">
      <Steps step={3} />
      <div style={{ textAlign: 'center', marginBottom: 16 }}>
        <h2 style={{ fontSize: 20, fontWeight: 800, color: '#F8FAFC', marginBottom: 4 }}>Preview & Send</h2>
        <p style={{ fontSize: 13, color: '#475569' }}>Edit the message, then send the postcard</p>
      </div>

      {/* Toolbar */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 10, alignItems: 'center' }}>
        <button onClick={() => setHandwritten(h => !h)}
          style={{
            display: 'flex', alignItems: 'center', gap: 6, padding: '8px 16px', borderRadius: 8,
            background: handwritten ? 'rgba(180,140,60,0.15)' : 'rgba(255,255,255,0.04)',
            border: `1px solid ${handwritten ? 'rgba(180,140,60,0.5)' : 'rgba(255,255,255,0.09)'}`,
            color: handwritten ? '#c49a30' : '#475569',
            fontSize: 12.5, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit', transition: 'all 0.15s',
          }}>
          🖊 {handwritten ? 'Pen Style: On' : 'Handwritten Pen'}
        </button>
      </div>


      {/* Postcard message editor */}
      <div style={{ borderRadius: 12, overflow: 'hidden', marginBottom: 14, border: `1px solid ${handwritten ? '#d9cfb0' : 'rgba(255,255,255,0.08)'}` }}>
        <div style={{ padding: '10px 16px', background: handwritten ? 'rgba(180,140,60,0.07)' : 'rgba(0,163,255,0.07)', borderBottom: `1px solid ${handwritten ? '#e0d8c0' : 'rgba(255,255,255,0.07)'}`, display: 'flex', alignItems: 'center', gap: 6 }}>
          <IcoCard size={13} style={{ color: handwritten ? '#c49a30' : '#00A3FF' }} />
          <span style={{ fontSize: 10.5, fontWeight: 700, color: handwritten ? '#c49a30' : '#00A3FF', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
            {handwritten ? 'Handwritten Message' : 'Postcard Message'}
          </span>
        </div>
        <textarea
          value={message}
          onChange={e => setMessage(e.target.value)}
          style={{
            display: 'block', width: '100%', padding: '14px 16px',
            resize: 'vertical', minHeight: 180, outline: 'none',
            border: 'none', boxSizing: 'border-box',
            transition: 'font-family 0.2s, background 0.2s, color 0.2s, font-size 0.15s',
            fontFamily: handwritten ? hwFont : 'Inter, system-ui, sans-serif',
            fontSize: activeFontSize,
            lineHeight: handwritten ? 2.1 : 1.75,
            color: handwritten ? '#1a2d5e' : '#94A3B8',
            background: handwritten ? '#FEFDF4' : 'rgba(255,255,255,0.02)',
            letterSpacing: handwritten ? '0.01em' : 'normal',
          }}
        />
        {/* Font size + character count */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '7px 14px 9px',
          background: handwritten ? '#FEFDF4' : 'rgba(255,255,255,0.02)',
          borderTop: `1px solid ${handwritten ? 'rgba(180,140,60,0.12)' : 'rgba(255,255,255,0.05)'}`,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
            <span style={{ fontSize: 9.5, fontWeight: 700, color: '#334155', letterSpacing: '0.07em', textTransform: 'uppercase', marginRight: 2 }}>Size</span>
            {['S', 'M', 'L'].map((lbl, idx) => (
              <button key={lbl} type="button" onClick={() => setFontSizeIdx(idx)}
                style={{
                  padding: '2px 8px', borderRadius: 5, cursor: 'pointer',
                  fontSize: [10, 12, 14][idx],
                  fontWeight: fontSizeIdx === idx ? 700 : 500,
                  background: fontSizeIdx === idx ? 'rgba(0,87,255,0.15)' : 'transparent',
                  border: `1px solid ${fontSizeIdx === idx ? 'rgba(0,87,255,0.35)' : 'rgba(255,255,255,0.07)'}`,
                  color: fontSizeIdx === idx ? '#00A3FF' : '#334155',
                  fontFamily: 'inherit', transition: 'all 0.12s',
                }}>
                {lbl}
              </button>
            ))}
          </div>
          <span style={{ fontSize: 11, fontWeight: 600, color: charColor }}>
            {message.length} / {MSG_MAX} characters
          </span>
        </div>
      </div>

      {/* Postcard front / back preview */}
      <div style={{ borderRadius: 12, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.08)', marginBottom: 14 }}>
          <div style={{ padding: '10px 16px', background: 'rgba(0,163,255,0.07)', borderBottom: '1px solid rgba(255,255,255,0.07)', display: 'flex', alignItems: 'center', gap: 6 }}>
            <IcoCard size={13} style={{ color: '#00A3FF' }} />
            <span style={{ fontSize: 10.5, fontWeight: 700, color: '#00A3FF', letterSpacing: '0.08em', textTransform: 'uppercase' }}>Postcard Preview (6×4")</span>
            {handwritten && <span style={{ fontSize: 10, color: '#c49a30', fontWeight: 700 }}>· Pen Style</span>}
          </div>
          <div style={{ padding: '12px 14px' }}>
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 12 }}>

              {/* ── Front (Image / Photo Side) ── */}
              <div style={{ order: isMobile ? 2 : 1 }}>
                <div style={{ fontSize: 9, fontWeight: 700, color: '#334155', letterSpacing: '0.1em', textTransform: 'uppercase', textAlign: 'center', marginBottom: 6 }}>Front</div>
                <div onClick={() => setZoomSide('front')} style={{
                  aspectRatio: '6/4', borderRadius: 7, overflow: 'hidden', position: 'relative',
                  border: '1px solid rgba(255,255,255,0.08)',
                  background: pcImg.bg, cursor: 'zoom-in',
                  ...(pcImg.id === 'custom' && form.postcardCustomImage
                    ? { backgroundImage: `url(${form.postcardCustomImage})`, backgroundSize: 'cover', backgroundPosition: 'center' }
                    : {}),
                }}>
                  <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: pcImg.stripe, zIndex: 1 }} />
                  {pcImg.id !== 'custom' && pcImg.thumb && (
                    <div style={{ position: 'absolute', inset: 0 }}>{pcImg.thumb()}</div>
                  )}
                  {pcImg.id === 'custom' && form.postcardCustomImage && (
                    <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.1)' }} />
                  )}
                  <div style={{ position: 'absolute', bottom: 5, right: 7, fontSize: 5, fontWeight: 800, letterSpacing: '0.15em', color: 'rgba(255,255,255,0.35)', textTransform: 'uppercase', zIndex: 2 }}>PHOTO SIDE</div>
                  <div style={{ position: 'absolute', top: 6, right: 6, background: 'rgba(0,0,0,0.45)', borderRadius: '50%', width: 18, height: 18, display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 3 }}>
                    <svg viewBox="0 0 16 16" width="10" height="10" fill="none" stroke="#fff" strokeWidth="1.8"><circle cx="6.5" cy="6.5" r="4.5"/><line x1="10" y1="10" x2="14" y2="14"/></svg>
                  </div>
                </div>
              </div>

              {/* ── Back (Message Side — white) ── */}
              <div style={{ order: isMobile ? 1 : 2 }}>
                <div style={{ fontSize: 9, fontWeight: 700, color: '#334155', letterSpacing: '0.1em', textTransform: 'uppercase', textAlign: 'center', marginBottom: 6 }}>Back (Message)</div>
                <div onClick={() => setZoomSide('back')} style={{
                  aspectRatio: '6/4', borderRadius: 7, overflow: 'hidden',
                  border: '1px solid #d1d5db',
                  background: handwritten ? '#FEFDF4' : '#FFFFFF',
                  display: 'flex', position: 'relative', cursor: 'zoom-in',
                }}>
                  {/* Message text area */}
                  <div style={{ flex: 1, padding: '7px 7px 6px', display: 'flex', flexDirection: 'column', overflow: 'hidden', minWidth: 0 }}>
                    <div style={{ fontFamily: handwritten ? hwFont : 'inherit', fontSize: previewFontSize, color: handwritten ? '#1a2d5e' : '#1e293b', lineHeight: handwritten ? 1.85 : 1.55, flex: 1, overflow: 'hidden', whiteSpace: 'pre-wrap' }}>
                      {message}
                    </div>
                    <div style={{ fontSize: 4.5, fontWeight: 700, color: handwritten ? '#a08050' : '#94a3b8', letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 3, flexShrink: 0 }}>MAILFLO.COM</div>
                  </div>

                  {/* Dashed vertical divider */}
                  <div style={{ width: 1, flexShrink: 0, margin: '5px 0', background: 'repeating-linear-gradient(to bottom, #cbd5e1 0px, #cbd5e1 4px, transparent 4px, transparent 8px)' }} />

                  {/* Address area */}
                  <div style={{ width: '40%', padding: '5px 6px', display: 'flex', flexDirection: 'column', flexShrink: 0, overflow: 'hidden' }}>
                    <div style={{ width: 16, height: 20, border: '1px solid #d1d5db', borderRadius: 1, background: 'rgba(0,87,255,0.05)', marginLeft: 'auto', marginBottom: 5, flexShrink: 0 }} />
                    <div style={{ fontFamily: handwritten ? hwFont : 'inherit', fontSize: handwritten ? 7.5 : 5.5, color: handwritten ? '#2d3e5e' : '#374151', lineHeight: 1.65 }}>
                      {form.name && <div style={{ fontWeight: 700, fontSize: handwritten ? 8 : 6 }}>{form.name}</div>}
                      {form.address
                        ? form.address.split(',').map((l, i) => <div key={i} style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{l.trim()}</div>)
                        : <><div>123 Customer Lane</div><div>City, State 00000</div></>}
                    </div>
                  </div>
                  <div style={{ position: 'absolute', top: 6, right: 6, background: 'rgba(0,0,0,0.18)', borderRadius: '50%', width: 18, height: 18, display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 3 }}>
                    <svg viewBox="0 0 16 16" width="10" height="10" fill="none" stroke="#64748b" strokeWidth="1.8"><circle cx="6.5" cy="6.5" r="4.5"/><line x1="10" y1="10" x2="14" y2="14"/></svg>
                  </div>
                </div>
              </div>

            </div>
          </div>
      </div>

      {/* ── Zoom Lightbox ── */}
      {zoomSide && (
        <div onClick={() => setZoomSide(null)} style={{
          position: 'fixed', inset: 0, zIndex: 9000,
          background: 'rgba(0,0,0,0.88)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: 20, cursor: 'zoom-out',
        }}>
          <div onClick={e => e.stopPropagation()} style={{ width: '100%', maxWidth: 780, position: 'relative' }}>
            <button onClick={() => setZoomSide(null)} style={{
              position: 'absolute', top: -14, right: -14, zIndex: 1,
              width: 32, height: 32, borderRadius: '50%',
              background: 'rgba(255,255,255,0.12)', border: '1px solid rgba(255,255,255,0.18)',
              color: '#fff', fontSize: 18, lineHeight: 1, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>×</button>
            <div style={{ display: 'flex', gap: 8, marginBottom: 12, justifyContent: 'center' }}>
              {['front','back'].map(s => (
                <button key={s} onClick={() => setZoomSide(s)} style={{
                  padding: '5px 18px', borderRadius: 20, fontSize: 12, fontWeight: 700, fontFamily: 'inherit', cursor: 'pointer',
                  background: zoomSide === s ? '#0057FF' : 'rgba(255,255,255,0.08)',
                  border: `1px solid ${zoomSide === s ? '#0057FF' : 'rgba(255,255,255,0.15)'}`,
                  color: zoomSide === s ? '#fff' : '#94a3b8',
                }}>{s === 'front' ? 'Front' : 'Back (Message)'}</button>
              ))}
            </div>
            <LobPreview
              html={zoomSide === 'front'
                ? buildLobFrontHtml(pcImg, pcImg.id === 'custom' ? form.postcardCustomImage : '')
                : buildLobZoomBackHtml(form, message, lobSender)}
              shadow={true}
            />
            <div style={{ textAlign: 'center', marginTop: 10, fontSize: 12, color: 'rgba(255,255,255,0.3)' }}>Click anywhere outside to close</div>
          </div>
        </div>
      )}

      {/* Action buttons */}
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 20, alignItems: 'center' }}>
        <button onClick={onBack}
          style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '10px 16px', borderRadius: 8, background: 'transparent', border: '1px solid rgba(255,255,255,0.09)', color: '#475569', fontSize: 13, cursor: 'pointer', fontFamily: 'inherit' }}>
          <IcoLeft size={13} /> Back
        </button>
        <div style={{ flex: 1 }} />
        <button onClick={() => setShowPayment(true)} disabled={lobLoading} className="btn-glow"
          style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '12px 24px', borderRadius: 10, fontSize: 14, fontWeight: 700, fontFamily: 'inherit', opacity: lobLoading ? 0.7 : 1 }}>
          <IcoCard size={14} /> {lobLoading ? 'Sending via Lob…' : 'Send Postcard — $4.99'}
        </button>
        {showPayment && (
          <PaymentModal
            recipientName={form.name}
            onClose={() => setShowPayment(false)}
            onSuccess={() => { setShowPayment(false); sendViaLob(); }}
          />
        )}
      </div>
    </div>
  );
}

// ── AuthModal ─────────────────────────────────────────────────────
function AuthModal({ onClose, onSuccess }) {
  const [mode, setMode] = useState('login'); // 'login' | 'signup' | 'forgot'
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [resetSent, setResetSent] = useState(false);

  async function handleSubmit(e) {
    e.preventDefault();
    if (!sb) { setError('Supabase not configured yet.'); return; }
    setLoading(true); setError('');
    try {
      if (mode === 'forgot') {
        const { error: err } = await sb.auth.resetPasswordForEmail(email, {
          redirectTo: window.location.origin,
        });
        if (err) throw err;
        setResetSent(true);
      } else {
        const { data, error: err } = mode === 'login'
          ? await sb.auth.signInWithPassword({ email, password })
          : await sb.auth.signUp({ email, password });
        if (err) throw err;
        if (data?.user) onSuccess(data.user, data.session);
      }
    } catch(e) { setError(e.message); }
    setLoading(false);
  }

  const inputSt = { display:'block', width:'100%', padding:'11px 13px', borderRadius:9, background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.1)', color:'#F8FAFC', fontSize:14, fontFamily:'inherit', outline:'none', boxSizing:'border-box', marginBottom:10 };

  return (
    <div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.8)', backdropFilter:'blur(6px)', display:'flex', alignItems:'center', justifyContent:'center', zIndex:200, padding:20 }}
      onClick={e => e.target === e.currentTarget && onClose()}>
      <div style={{ background:'#0B1220', border:'1px solid rgba(255,255,255,0.08)', borderRadius:20, width:'100%', maxWidth:400, padding:'32px 28px', boxShadow:'0 32px 100px rgba(0,0,0,0.85)' }}>
        <div style={{ fontSize:22, fontWeight:900, color:'#F8FAFC', marginBottom:4 }}>
          {mode === 'login' ? 'Sign In' : mode === 'signup' ? 'Create Account' : 'Reset Password'}
        </div>
        <div style={{ fontSize:13, color:'#475569', marginBottom:24 }}>
          {mode === 'login' ? 'Welcome back to MailFlo' : mode === 'signup' ? 'Start sending thank you postcards' : 'Enter your email and we\'ll send a reset link'}
        </div>

        {resetSent ? (
          <div style={{ textAlign:'center', padding:'20px 0' }}>
            <div style={{ fontSize:32, marginBottom:12 }}>📬</div>
            <div style={{ fontSize:15, fontWeight:700, color:'#F8FAFC', marginBottom:8 }}>Check your email</div>
            <div style={{ fontSize:13, color:'#475569', marginBottom:20 }}>We sent a password reset link to <strong style={{ color:'#94A3B8' }}>{email}</strong></div>
            <button onClick={() => { setMode('login'); setResetSent(false); }}
              style={{ background:'none', border:'none', color:'#00A3FF', cursor:'pointer', fontFamily:'inherit', fontSize:13, fontWeight:600 }}>
              ← Back to Sign In
            </button>
          </div>
        ) : (
          <>
            <form onSubmit={handleSubmit}>
              <input type="email" required value={email} onChange={e => setEmail(e.target.value)} placeholder="Email address" style={inputSt} />
              {mode !== 'forgot' && (
                <input type="password" required value={password} onChange={e => setPassword(e.target.value)} placeholder="Password" style={inputSt} />
              )}
              {error && <div style={{ fontSize:12, color:'#ef4444', marginBottom:10 }}>{error}</div>}
              <button type="submit" disabled={loading} className="btn-glow"
                style={{ width:'100%', padding:'13px', borderRadius:10, fontSize:15, fontWeight:800, fontFamily:'inherit', opacity: loading ? 0.7 : 1, marginBottom:12 }}>
                {loading ? '…' : mode === 'login' ? 'Sign In' : mode === 'signup' ? 'Create Account' : 'Send Reset Link'}
              </button>
            </form>
            <div style={{ textAlign:'center', fontSize:13, color:'#475569' }}>
              {mode === 'login' && (
                <>
                  <button onClick={() => { setMode('forgot'); setError(''); }}
                    style={{ background:'none', border:'none', color:'#475569', cursor:'pointer', fontFamily:'inherit', fontSize:13, display:'block', margin:'0 auto 8px' }}>
                    Forgot password?
                  </button>
                  Don't have an account?{' '}
                  <button onClick={() => { setMode('signup'); setError(''); }}
                    style={{ background:'none', border:'none', color:'#00A3FF', cursor:'pointer', fontFamily:'inherit', fontSize:13, fontWeight:600 }}>
                    Sign Up
                  </button>
                </>
              )}
              {mode === 'signup' && (
                <>Already have an account?{' '}
                  <button onClick={() => { setMode('login'); setError(''); }}
                    style={{ background:'none', border:'none', color:'#00A3FF', cursor:'pointer', fontFamily:'inherit', fontSize:13, fontWeight:600 }}>
                    Sign In
                  </button>
                </>
              )}
              {mode === 'forgot' && (
                <button onClick={() => { setMode('login'); setError(''); }}
                  style={{ background:'none', border:'none', color:'#00A3FF', cursor:'pointer', fontFamily:'inherit', fontSize:13, fontWeight:600 }}>
                  ← Back to Sign In
                </button>
              )}
            </div>
          </>
        )}
      </div>
    </div>
  );
}

// ── Select helper ──────────────────────────────────────────────────
function SelectField({ value, onChange, options, placeholder }) {
  const [focused, setFocused] = useState(false);
  return (
    <select value={value} onChange={e => onChange(e.target.value)}
      onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}
      style={{ ...inputStyle, borderColor: focused ? '#0057FF' : 'rgba(255,255,255,0.09)', cursor: 'pointer', colorScheme: 'dark' }}>
      <option value="">{placeholder}</option>
      {options.map(o => <option key={o} value={o}>{o}</option>)}
    </select>
  );
}

// ── Modal ──────────────────────────────────────────────────────────
function Modal({ open, onClose, children }) {
  if (!open) return null;
  return (
    <div
      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.75)', backdropFilter: 'blur(6px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100, padding: 20 }}
      onClick={e => e.target === e.currentTarget && onClose()}
    >
      <div className="modal-in" style={{
        background: '#0B1220', border: '1px solid rgba(255,255,255,0.07)',
        borderRadius: 20, width: '100%', maxWidth: 640,
        maxHeight: '92vh', overflowY: 'auto', padding: '32px 28px',
        boxShadow: '0 32px 100px rgba(0,0,0,0.85)',
        position: 'relative',
      }}>
        <button onClick={onClose}
          style={{ position: 'absolute', top: 16, right: 16, width: 28, height: 28, borderRadius: '50%', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: '#475569', fontFamily: 'inherit' }}>
          <IcoX size={13} />
        </button>
        {children}
      </div>
    </div>
  );
}

// ── History ────────────────────────────────────────────────────────
const TRACKING_EVENTS = {
  'postcard.created':               { label: 'Postcard Created',         icon: '📝', color: '#00A3FF' },
  'postcard.rendered_pdf':          { label: 'PDF Rendered',             icon: '🖨️', color: '#00A3FF' },
  'postcard.rendered_thumbnails':   { label: 'Thumbnails Rendered',      icon: '🖼️', color: '#00A3FF' },
  'in_transit':                     { label: 'In Transit',               icon: '🚚', color: '#F59E0B' },
  'in_local_area':                  { label: 'In Local Area',            icon: '📍', color: '#F59E0B' },
  'processed_for_delivery':         { label: 'Out for Delivery',         icon: '📮', color: '#F59E0B' },
  'delivered':                      { label: 'Delivered',                icon: '✅', color: '#10B981' },
  're-routed':                      { label: 'Re-routed',                icon: '🔄', color: '#F59E0B' },
  'returned_to_sender':             { label: 'Returned to Sender',       icon: '↩️', color: '#EF4444' },
};

function TrackingPanel({ lobId, session }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const headers = { 'Content-Type': 'application/json' };
    if (session?.access_token) headers['Authorization'] = `Bearer ${session.access_token}`;
    fetch(`/api/postcard-status?id=${lobId}`, { headers })
      .then(r => r.json())
      .then(d => { setData(d); setLoading(false); })
      .catch(() => setLoading(false));
  }, [lobId]);

  if (loading) return <div style={{ padding: '12px 0', color: '#475569', fontSize: 12 }}>Loading tracking info…</div>;
  if (!data || data.error) return <div style={{ padding: '12px 0', color: '#475569', fontSize: 12 }}>Tracking unavailable.</div>;

  const fmtDate = d => d ? new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : null;
  const fmtDateTime = d => d ? new Date(d).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }) : null;

  const deliveryStart = fmtDate(data.expected_delivery_date);
  const events = [
    ...(data.tracking_events || []).map(e => ({ type: e.type, time: e.time, location: e.location })),
  ].reverse();

  // Always show created event
  const allEvents = [
    { type: 'postcard.created', time: data.date_created },
    ...(data.tracking_events || []).slice().reverse(),
  ];

  return (
    <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid rgba(255,255,255,0.06)' }}>
      {/* Delivery estimate */}
      {deliveryStart && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14, padding: '8px 12px', background: 'rgba(16,185,129,0.06)', borderRadius: 8, border: '1px solid rgba(16,185,129,0.15)' }}>
          <span>📅</span>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, color: '#10B981' }}>Estimated Delivery</div>
            <div style={{ fontSize: 12, color: '#94A3B8' }}>{deliveryStart}</div>
          </div>
        </div>
      )}

      {/* Event timeline */}
      <div style={{ fontSize: 11, fontWeight: 700, color: '#475569', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 10 }}>Tracking Events</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {allEvents.map((e, i) => {
          const info = TRACKING_EVENTS[e.type] || { label: e.type, icon: '📌', color: '#475569' };
          return (
            <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
              <div style={{ width: 28, height: 28, borderRadius: 7, background: `${info.color}18`, border: `1px solid ${info.color}30`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, flexShrink: 0 }}>{info.icon}</div>
              <div>
                <div style={{ fontSize: 12, fontWeight: 600, color: '#F8FAFC' }}>{info.label}</div>
                <div style={{ fontSize: 11, color: '#475569' }}>
                  {fmtDateTime(e.time)}
                  {e.location ? ` · ${e.location}` : ''}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function HistoryView({ user, session, onBack }) {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);
  const [expanded, setExpanded] = useState(null);

  useEffect(() => {
    if (!user || !sb) { setLoading(false); return; }
    sb.from('postcard_history')
      .select('*')
      .order('created_at', { ascending: false })
      .limit(100)
      .then(({ data }) => { if (data) setItems(data); setLoading(false); });
  }, [user]);

  return (
    <div style={{ minHeight: '100vh', background: '#05070B', fontFamily: 'Inter,system-ui,sans-serif', color: '#F8FAFC' }}>
      <header style={{ padding: '18px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
        <Logo size={34} />
        <button onClick={onBack} style={{ padding: '7px 15px', borderRadius: 8, background: 'transparent', border: '1px solid rgba(255,255,255,0.09)', color: '#94A3B8', fontSize: 13, cursor: 'pointer', fontFamily: 'inherit' }}>← Back</button>
      </header>
      <div style={{ maxWidth: 700, margin: '0 auto', padding: '40px 24px' }}>
        <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 6 }}>History</h1>
        <p style={{ color: '#475569', fontSize: 13, marginBottom: 32 }}>Click any postcard to see delivery tracking.</p>

        {!user && (
          <div style={{ textAlign: 'center', padding: 48, color: '#475569', background: 'rgba(255,255,255,0.02)', borderRadius: 14, border: '1px solid rgba(255,255,255,0.06)' }}>
            Sign in to view your send history.
          </div>
        )}
        {user && loading && (
          <div style={{ textAlign: 'center', padding: 48, color: '#475569' }}>Loading…</div>
        )}
        {user && !loading && items.length === 0 && (
          <div style={{ textAlign: 'center', padding: 48, color: '#475569', background: 'rgba(255,255,255,0.02)', borderRadius: 14, border: '1px solid rgba(255,255,255,0.06)' }}>
            No postcards sent yet. Send your first one!
          </div>
        )}
        {user && !loading && items.length > 0 && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {items.map(item => {
              const isOpen = expanded === item.id;
              return (
                <div key={item.id}
                  onClick={() => setExpanded(isOpen ? null : item.id)}
                  style={{ padding: '14px 18px', background: isOpen ? 'rgba(0,87,255,0.04)' : 'rgba(255,255,255,0.02)', borderRadius: 12, border: `1px solid ${isOpen ? 'rgba(0,87,255,0.2)' : 'rgba(255,255,255,0.06)'}`, cursor: 'pointer', transition: 'all 0.15s' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 0 }}>
                      <div style={{ width: 36, height: 36, borderRadius: 9, background: 'rgba(16,185,129,0.1)', border: '1px solid rgba(16,185,129,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontSize: 17 }}>📬</div>
                      <div style={{ minWidth: 0 }}>
                        <div style={{ fontWeight: 700, fontSize: 14, color: '#F8FAFC', marginBottom: 2 }}>{item.recipient_name}</div>
                        <div style={{ fontSize: 11.5, color: '#475569', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.recipient_address}</div>
                        {item.message && <div style={{ fontSize: 11, color: '#334155', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 320 }}>"{item.message.slice(0, 80)}{item.message.length > 80 ? '…' : ''}"</div>}
                      </div>
                    </div>
                    <div style={{ textAlign: 'right', flexShrink: 0 }}>
                      <div style={{ fontSize: 11, fontWeight: 700, color: '#10B981', background: 'rgba(16,185,129,0.08)', border: '1px solid rgba(16,185,129,0.18)', borderRadius: 6, padding: '2px 8px', marginBottom: 4, display: 'inline-block' }}>✓ Sent</div>
                      <div style={{ fontSize: 11, color: '#475569' }}>{new Date(item.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</div>
                      <div style={{ fontSize: 10, color: '#334155', marginTop: 2 }}>{isOpen ? '▲ Hide' : '▼ Track'}</div>
                    </div>
                  </div>
                  {isOpen && item.lob_id && <TrackingPanel lobId={item.lob_id} session={session} />}
                  {isOpen && !item.lob_id && <div style={{ marginTop: 12, fontSize: 12, color: '#475569' }}>No tracking ID available.</div>}
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}

// ── Home ───────────────────────────────────────────────────────────
function Home({ onStart, onBilling, onHistory, user, onLogin, onLogout }) {
  const [showDash, setShowDash] = useState(false);
  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 640);
  React.useEffect(() => {
    const handler = () => setIsMobile(window.innerWidth < 640);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);

  const sec = { maxWidth: 1080, margin: '0 auto', width: '100%', padding: '0 24px' };

  return (
    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', background: '#05070B' }} onClick={() => setShowDash(false)}>

      {/* ── Header ── */}
      <header style={{ padding: '18px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgba(255,255,255,0.05)', position: 'sticky', top: 0, background: 'rgba(5,7,11,0.92)', backdropFilter: 'blur(12px)', zIndex: 50 }}>
        <Logo size={34} />
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          {user && <div style={{ position: 'relative' }} onClick={e => e.stopPropagation()}>
            <button onClick={() => setShowDash(s => !s)}
              style={{ padding: '7px 15px', borderRadius: 8, background: showDash ? 'rgba(0,87,255,0.1)' : 'transparent', border: `1px solid ${showDash ? 'rgba(0,87,255,0.3)' : 'rgba(255,255,255,0.09)'}`, color: showDash ? '#00A3FF' : '#475569', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', transition: 'all 0.15s', display: 'flex', alignItems: 'center', gap: 5 }}>
              Dashboard <span style={{ fontSize: 9 }}>▼</span>
            </button>
            {showDash && (
              <div style={{ position: 'absolute', top: 'calc(100% + 6px)', right: 0, background: '#0D1626', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 10, overflow: 'hidden', minWidth: 150, zIndex: 100, boxShadow: '0 8px 32px rgba(0,0,0,0.5)' }}>
                <button onClick={() => { setShowDash(false); onHistory(); }} style={{ display: 'block', width: '100%', padding: '11px 16px', background: 'none', border: 'none', color: '#94A3B8', fontSize: 13, cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left' }} onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.05)'} onMouseLeave={e => e.currentTarget.style.background = 'none'}>History</button>
                <div style={{ height: 1, background: 'rgba(255,255,255,0.06)' }} />
                <button onClick={() => { setShowDash(false); onBilling(); }} style={{ display: 'block', width: '100%', padding: '11px 16px', background: 'none', border: 'none', color: '#94A3B8', fontSize: 13, cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left' }} onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.05)'} onMouseLeave={e => e.currentTarget.style.background = 'none'}>Billing</button>
              </div>
            )}
          </div>}
          {user ? (
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ fontSize: 12, color: '#475569', maxWidth: 140, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{user.email}</div>
              <button onClick={onLogout} style={{ padding: '7px 13px', borderRadius: 8, background: 'transparent', border: '1px solid rgba(255,255,255,0.09)', color: '#475569', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit' }}>Sign Out</button>
            </div>
          ) : (
            <button onClick={onLogin} style={{ padding: '7px 15px', borderRadius: 8, background: 'rgba(16,185,129,0.1)', border: '1px solid rgba(16,185,129,0.3)', color: '#10B981', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>Sign In</button>
          )}
        </div>
      </header>

      {/* ── Hero ── */}
      <section style={{ padding: '96px 24px 80px', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
        {/* Background glow */}
        <div style={{ position: 'absolute', top: -120, left: '50%', transform: 'translateX(-50%)', width: 700, height: 700, borderRadius: '50%', background: 'radial-gradient(circle,rgba(0,87,255,0.12) 0%,transparent 70%)', pointerEvents: 'none' }} />

        <div className="fade-up" style={{ ...sec, maxWidth: 680, position: 'relative' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'rgba(0,87,255,0.1)', border: '1px solid rgba(0,87,255,0.25)', borderRadius: 100, padding: '5px 16px', marginBottom: 28 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#00A3FF', display: 'inline-block' }} />
            <span style={{ fontSize: 11, fontWeight: 700, color: '#00A3FF', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Built for Service Businesses</span>
          </div>

          <h1 style={{ fontSize: 'clamp(38px,6vw,68px)', fontWeight: 900, color: '#F8FAFC', lineHeight: 1.05, letterSpacing: '-0.04em', marginBottom: 20 }}>
            Turn Every Job Into<br />
            <span style={{ background: 'linear-gradient(135deg,#0057FF,#00A3FF)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>a Loyal Customer</span>
          </h1>
          <p style={{ fontSize: 17, color: '#64748B', lineHeight: 1.7, marginBottom: 44, maxWidth: 480, margin: '0 auto 44px' }}>
            Send a real, physical thank-you postcard to every customer in under 2 minutes. Stand out from the competition and keep them coming back.
          </p>

          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button onClick={onStart} className="btn-glow"
              style={{ padding: '18px 52px', fontSize: 17, fontWeight: 800, borderRadius: 14, fontFamily: 'inherit', letterSpacing: '-0.01em', display: 'inline-flex', alignItems: 'center', gap: 10 }}>
              ✉️ &nbsp;Send Thank You Mail
            </button>
          </div>

          <div style={{ display: 'flex', gap: 32, justifyContent: 'center', marginTop: 40, flexWrap: 'wrap' }}>
            {[['✉️', 'Real physical postcards'], ['⚡', 'Send in under 2 minutes'], ['🚚', '5–7 day delivery'], ['💳', 'No monthly fee'], ['✅', 'No sign up required']].map(([icon, text]) => (
              <div key={text} style={{ display: 'flex', alignItems: 'center', gap: 6, color: '#334155', fontSize: 13 }}>
                <span>{icon}</span><span>{text}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── How It Works ── */}
      <section style={{ padding: '80px 24px', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
        <div style={sec}>
          <div style={{ textAlign: 'center', marginBottom: 52 }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: '#0057FF', letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 12 }}>How It Works</div>
            <h2 style={{ fontSize: 'clamp(26px,4vw,40px)', fontWeight: 900, color: '#F8FAFC', letterSpacing: '-0.03em' }}>Three steps to a happy customer</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(260px,1fr))', gap: 24 }}>
            {[
              { num: '01', icon: '📋', title: 'Enter Customer Info', desc: 'Add their name, address, and the service you completed. Takes less than a minute.' },
              { num: '02', icon: '🎨', title: 'Choose a Template', desc: 'Pick from beautiful designs or upload your own photo. Write a personal message.' },
              { num: '03', icon: '📬', title: 'We Print & Mail It', desc: 'We handle printing, postage, and delivery. A real postcard arrives in 5–7 days.' },
            ].map(({ num, icon, title, desc }) => (
              <div key={num} style={{ padding: '32px 28px', borderRadius: 16, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.07)', position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', top: 20, right: 24, fontSize: 36, fontWeight: 900, color: 'rgba(255,255,255,0.04)', letterSpacing: '-0.05em' }}>{num}</div>
                <div style={{ fontSize: 36, marginBottom: 16 }}>{icon}</div>
                <div style={{ fontSize: 17, fontWeight: 800, color: '#F8FAFC', marginBottom: 10, letterSpacing: '-0.02em' }}>{title}</div>
                <div style={{ fontSize: 14, color: '#475569', lineHeight: 1.65 }}>{desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Why MailFlo ── */}
      <section style={{ padding: '80px 24px', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
        <div style={sec}>
          <div style={{ textAlign: 'center', marginBottom: 52 }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: '#0057FF', letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 12 }}>Why MailFlo</div>
            <h2 style={{ fontSize: 'clamp(26px,4vw,40px)', fontWeight: 900, color: '#F8FAFC', letterSpacing: '-0.03em' }}>Everything you need, nothing you don't</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 20 }}>
            {[
              { icon: '📮', title: 'Real Physical Mail', desc: 'Not email. A real 4×6 postcard that lands in their mailbox and gets noticed.' },
              { icon: '✍️', title: 'Handwritten Font', desc: 'Toggle a handwritten pen style to make your message feel warm and personal.' },
              { icon: '🖼️', title: 'Beautiful Templates', desc: 'Elegant, Nature, Rustic — or upload your own brand photo.' },
              { icon: '🚀', title: 'Fast & Simple', desc: 'No design software, no complicated setup. Send your first card in minutes.' },
              { icon: '📊', title: 'Send History', desc: "Track every postcard you've sent, who it went to, and when." },
              { icon: '💰', title: 'Pay As You Go', desc: 'No subscription required. Pay $4.99 per postcard and only when you send.' },
            ].map(({ icon, title, desc }) => (
              <div key={title} style={{ padding: '24px 22px', borderRadius: 14, background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.06)', transition: 'border-color 0.2s' }}
                onMouseEnter={e => e.currentTarget.style.borderColor = 'rgba(0,87,255,0.3)'}
                onMouseLeave={e => e.currentTarget.style.borderColor = 'rgba(255,255,255,0.06)'}>
                <div style={{ fontSize: 28, marginBottom: 12 }}>{icon}</div>
                <div style={{ fontSize: 15, fontWeight: 700, color: '#F8FAFC', marginBottom: 8 }}>{title}</div>
                <div style={{ fontSize: 13, color: '#475569', lineHeight: 1.6 }}>{desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Pricing ── */}
      <section style={{ padding: '80px 24px', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
        <div style={sec}>
          <div style={{ textAlign: 'center', marginBottom: 52 }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: '#0057FF', letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 12 }}>Pricing</div>
            <h2 style={{ fontSize: 'clamp(26px,4vw,40px)', fontWeight: 900, color: '#F8FAFC', letterSpacing: '-0.03em' }}>Simple, transparent pricing</h2>
            <p style={{ fontSize: 15, color: '#475569', marginTop: 12 }}>No hidden fees. No surprises.</p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 24, maxWidth: 760, margin: '0 auto' }}>
            {/* Pay As You Go */}
            <div style={{ padding: '36px 32px', borderRadius: 20, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.09)', display: 'flex', flexDirection: 'column' }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: '#475569', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 16 }}>Pay As You Go</div>
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, marginBottom: 4 }}>
                <span style={{ fontSize: 48, fontWeight: 900, color: '#F8FAFC', letterSpacing: '-0.04em', lineHeight: 1 }}>$0</span>
                <span style={{ fontSize: 14, color: '#475569', paddingBottom: 6 }}>/month</span>
              </div>
              <div style={{ fontSize: 14, color: '#00A3FF', fontWeight: 600, marginBottom: 28 }}>$4.99 per postcard</div>
              <div style={{ height: 1, background: 'rgba(255,255,255,0.07)', marginBottom: 24 }} />
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 32 }}>
                {['No monthly commitment', 'Pay only when you send', 'All templates included', 'Full send history', 'Real postcard delivery'].map(f => (
                  <div key={f} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: '#94A3B8' }}>
                    <span style={{ color: '#10B981', fontSize: 16 }}>✓</span> {f}
                  </div>
                ))}
              </div>
              <button onClick={onStart} className="btn-glow"
                style={{ padding: '14px', fontSize: 14, fontWeight: 700, borderRadius: 10, fontFamily: 'inherit', width: '100%', textAlign: 'center' }}>
                Get Started Free
              </button>
            </div>

            {/* Automation Plan */}
            <div style={{ padding: '36px 32px', borderRadius: 20, background: 'linear-gradient(135deg,rgba(0,87,255,0.1),rgba(0,163,255,0.06))', border: '1px solid rgba(0,87,255,0.35)', display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: 20, right: 20, background: 'linear-gradient(135deg,#0057FF,#00A3FF)', borderRadius: 100, padding: '3px 12px', fontSize: 10, fontWeight: 800, color: '#fff', letterSpacing: '0.08em', textTransform: 'uppercase' }}>Popular</div>
              <div style={{ fontSize: 13, fontWeight: 700, color: '#00A3FF', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 16 }}>Automation Plan</div>
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, marginBottom: 4 }}>
                <span style={{ fontSize: 48, fontWeight: 900, color: '#F8FAFC', letterSpacing: '-0.04em', lineHeight: 1 }}>$49.99</span>
                <span style={{ fontSize: 14, color: '#475569', paddingBottom: 6 }}>/month</span>
              </div>
              <div style={{ fontSize: 14, color: '#00A3FF', fontWeight: 600, marginBottom: 28 }}>$3.99 per postcard · 1 user included</div>
              <div style={{ height: 1, background: 'rgba(0,87,255,0.2)', marginBottom: 24 }} />
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 32 }}>
                {['Auto-send on every new customer', 'Unlimited postcards', 'Postcard triggers on new jobs', 'Priority support', 'CRM integrations (coming soon)'].map(f => (
                  <div key={f} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: '#94A3B8' }}>
                    <span style={{ color: '#00A3FF', fontSize: 16 }}>✓</span> {f}
                  </div>
                ))}
              </div>
              <button onClick={onStart}
                style={{ padding: '14px', fontSize: 14, fontWeight: 700, borderRadius: 10, fontFamily: 'inherit', width: '100%', textAlign: 'center', background: 'linear-gradient(135deg,#0057FF,#00A3FF)', border: 'none', color: '#fff', cursor: 'pointer', boxShadow: '0 0 32px rgba(0,87,255,0.4)' }}>
                Get Started — $49.99/mo
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* ── Bottom CTA ── */}
      <section style={{ padding: '80px 24px', borderTop: '1px solid rgba(255,255,255,0.05)', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', bottom: -100, left: '50%', transform: 'translateX(-50%)', width: 600, height: 600, borderRadius: '50%', background: 'radial-gradient(circle,rgba(0,87,255,0.1) 0%,transparent 70%)', pointerEvents: 'none' }} />
        <div style={{ position: 'relative' }}>
          <h2 style={{ fontSize: 'clamp(28px,4vw,48px)', fontWeight: 900, color: '#F8FAFC', letterSpacing: '-0.035em', marginBottom: 16 }}>
            Ready to wow your customers?
          </h2>
          <p style={{ fontSize: 16, color: '#475569', marginBottom: 36, maxWidth: 420, margin: '0 auto 36px' }}>
            Your next customer deserves a thank you. Send your first postcard today.
          </p>
          <button onClick={onStart} className="btn-glow"
            style={{ padding: '18px 56px', fontSize: 17, fontWeight: 800, borderRadius: 14, fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            ✉️ &nbsp;Send Your First Postcard
          </button>
        </div>
      </section>

      {/* ── Footer ── */}
      <footer style={{ padding: '28px 32px', borderTop: '1px solid rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
        <Logo size={26} />
        <div style={{ fontSize: 12, color: '#1E2D45' }}>© {new Date().getFullYear()} MailFlo. All rights reserved.</div>
        <div style={{ fontSize: 12, color: '#1E2D45' }}>www.mailflo.com</div>
      </footer>

    </div>
  );
}

// ── Billing ────────────────────────────────────────────────────────
function Billing({ onBack, session }) {
  const [plan, setPlan]           = useState('payg');
  const [savedCard, setSavedCard] = useState(null);
  const [showCardForm, setShowCardForm] = useState(false);
  const [cardNum, setCardNum]     = useState('');
  const [cardExpiry, setCardExpiry] = useState('');
  const [cardCvc, setCardCvc]     = useState('');
  const [cardName, setCardName]   = useState('');
  const [apiKey, setApiKey]       = useState('');
  const [apiKeyLoading, setApiKeyLoading] = useState(false);
  const [apiKeyVisible, setApiKeyVisible] = useState(false);
  const [apiKeyCopied, setApiKeyCopied]   = useState(false);
  const [checkoutLoading, setCheckoutLoading] = useState(false);
  const [checkoutMsg, setCheckoutMsg] = useState(() => {
    const p = new URLSearchParams(window.location.search);
    if (p.get('checkout') === 'success') return 'success';
    if (p.get('checkout') === 'cancel')  return 'cancel';
    return null;
  });

  // Load plan status from Supabase on mount
  useEffect(() => {
    if (!session?.access_token || !sb) return;
    sb.from('user_settings').select('plan').single().then(({ data }) => {
      if (data?.plan === 'automation') setPlan('automation');
    });
  }, [session]);

  async function startCheckout() {
    if (!session?.access_token) { alert('Please sign in first.'); return; }
    setCheckoutLoading(true);
    try {
      const res = await fetch('/api/create-checkout-session', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${session.access_token}` },
      });
      const data = await res.json();
      if (data.url) window.location.href = data.url;
      else alert('Error: ' + (data.error || 'Could not start checkout'));
    } catch(e) { alert('Error: ' + e.message); }
    setCheckoutLoading(false);
  }

  async function loadApiKey() {
    if (!session?.access_token) return;
    setApiKeyLoading(true);
    try {
      const res = await fetch('/api/get-api-key', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${session.access_token}` },
      });
      const data = await res.json();
      if (data.api_key) setApiKey(data.api_key);
      else if (data.error === 'upgrade_required') setCheckoutMsg('upgrade_required');
    } catch(e) {}
    setApiKeyLoading(false);
  }

  function copyKey() {
    navigator.clipboard.writeText(apiKey).then(() => {
      setApiKeyCopied(true);
      setTimeout(() => setApiKeyCopied(false), 2000);
    });
  }

  const PLANS = {
    payg: {
      name: 'Pay As You Go',
      price: '$0/month',
      sub: '$4.99 per postcard',
      badge: 'Current',
      features: ['No monthly fee', 'Pay only when you send', 'Postcard sends', 'Full customer history'],
    },
    automation: {
      name: 'Automation Plan',
      price: '$49.99/month',
      sub: '$3.99 per postcard · 1 user included',
      badge: '🚀 Active',
      features: ['Auto-send on every new customer', 'Unlimited postcards', 'Postcard triggers on new installs', 'Priority support', 'CRM integrations (coming soon)'],
    },
  };

  const current = PLANS[plan];

  function handleSaveCard(e) {
    e.preventDefault();
    const last4 = cardNum.replace(/\D/g, '').slice(-4) || '****';
    setSavedCard({ last4, brand: 'Card', expiry: cardExpiry || '--/--' });
    setShowCardForm(false);
    setCardNum(''); setCardExpiry(''); setCardCvc(''); setCardName('');
  }

  return (
    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', background: '#05070B', fontFamily: 'Inter,system-ui,sans-serif', color: '#F8FAFC' }}>
      <header style={{ padding: '18px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
        <Logo size={34} />
        <button onClick={onBack}
          style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 16px', borderRadius: 8, background: 'transparent', border: '1px solid rgba(255,255,255,0.09)', color: '#475569', fontSize: 13, cursor: 'pointer', fontFamily: 'inherit' }}>
          <IcoLeft size={13} /> Home
        </button>
      </header>

      <main style={{ flex: 1, maxWidth: 660, margin: '0 auto', width: '100%', padding: '48px 24px 80px' }}>
        <div className="fade-up">

          {/* Checkout result banners */}
          {checkoutMsg === 'success' && (
            <div style={{ marginBottom: 24, padding: '16px 20px', borderRadius: 12, background: 'rgba(16,185,129,0.1)', border: '1px solid rgba(16,185,129,0.3)', display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ fontSize: 20 }}>🎉</span>
              <div>
                <div style={{ fontSize: 14, fontWeight: 700, color: '#10B981' }}>You're on the Automation Plan!</div>
                <div style={{ fontSize: 12, color: '#475569', marginTop: 2 }}>Your account has been upgraded. Generate your API key below to get started.</div>
              </div>
            </div>
          )}
          {checkoutMsg === 'cancel' && (
            <div style={{ marginBottom: 24, padding: '14px 20px', borderRadius: 12, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', fontSize: 13, color: '#475569' }}>
              Checkout was cancelled — no charge was made.
            </div>
          )}

          <h1 style={{ fontSize: 26, fontWeight: 900, color: '#F8FAFC', marginBottom: 4 }}>Billing & Plan</h1>
          <p style={{ fontSize: 14, color: '#475569', marginBottom: 36 }}>Manage your subscription and payment method</p>

          {/* Current Plan */}
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', color: '#1E2D45', textTransform: 'uppercase', marginBottom: 10 }}>Current Plan</div>
          <div style={{
            padding: '24px', borderRadius: 16, marginBottom: 20,
            background: plan === 'automation' ? 'linear-gradient(135deg,rgba(0,87,255,0.1),rgba(0,163,255,0.06))' : 'rgba(255,255,255,0.03)',
            border: `1px solid ${plan === 'automation' ? 'rgba(0,87,255,0.35)' : 'rgba(255,255,255,0.08)'}`,
          }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 16 }}>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                  <span style={{ fontSize: 18, fontWeight: 900, color: '#F8FAFC' }}>{current.name}</span>
                  <span style={{ fontSize: 10, fontWeight: 700, padding: '2px 8px', borderRadius: 100,
                    background: plan === 'automation' ? 'rgba(0,87,255,0.2)' : 'rgba(255,255,255,0.06)',
                    color: plan === 'automation' ? '#00A3FF' : '#475569',
                    border: `1px solid ${plan === 'automation' ? 'rgba(0,87,255,0.3)' : 'rgba(255,255,255,0.08)'}` }}>
                    {current.badge}
                  </span>
                </div>
                <div style={{ fontSize: 26, fontWeight: 900, color: plan === 'automation' ? '#00A3FF' : '#F8FAFC', letterSpacing: '-0.03em', marginBottom: 3 }}>{current.price}</div>
                <div style={{ fontSize: 12.5, color: '#475569' }}>{current.sub}</div>
              </div>
              {plan === 'payg' && (
                <button onClick={startCheckout} disabled={checkoutLoading} className="btn-glow"
                  style={{ padding: '10px 20px', borderRadius: 10, fontSize: 13, fontWeight: 800, fontFamily: 'inherit', whiteSpace: 'nowrap' }}>
                  {checkoutLoading ? 'Redirecting…' : 'Upgrade →'}
                </button>
              )}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 7 }}>
              {current.features.map(f => (
                <div key={f} style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 12.5, color: '#475569' }}>
                  <IcoCheck size={11} style={{ color: plan === 'automation' ? '#0057FF' : '#2D3F5C', flexShrink: 0 }} /> {f}
                </div>
              ))}
            </div>
          </div>

          {/* Upgrade Teaser — only on Pay As You Go */}
          {plan === 'payg' && (
            <div className="fade-up" style={{ marginBottom: 28, borderRadius: 16, border: '1px solid rgba(0,87,255,0.25)', position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: 'linear-gradient(90deg,#0043CC,#0057FF,#00A3FF)' }} />
              <div style={{ padding: '28px 28px 24px' }}>
                <div style={{ fontSize: 10.5, fontWeight: 700, color: '#00A3FF', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 14 }}>✨ Automation Plan</div>
                <h3 style={{ fontSize: 20, fontWeight: 900, color: '#F8FAFC', lineHeight: 1.35, marginBottom: 14 }}>
                  How would it feel to install a new account and have a postcard{' '}
                  <span style={{ color: '#00A3FF' }}>automatically on its way</span>{' '}
                  before you even leave the driveway?
                </h3>
                <p style={{ fontSize: 13.5, color: '#475569', lineHeight: 1.75, marginBottom: 22 }}>
                  No manual steps. No remembering. The moment you add a new customer, MailFlo triggers a personalized thank-you postcard automatically. Your competition is still doing it by hand — if they're doing it at all.
                </p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'center' }}>
                  <button onClick={startCheckout} disabled={checkoutLoading} className="btn-glow"
                    style={{ padding: '14px 28px', borderRadius: 12, fontSize: 14, fontWeight: 800, fontFamily: 'inherit', display: 'flex', alignItems: 'center', gap: 8 }}>
                    🚀 {checkoutLoading ? 'Redirecting…' : 'Upgrade to Automation — $49.99/mo'}
                  </button>
                  <span style={{ fontSize: 11.5, color: '#2D3F5C' }}>Cancel anytime · No contracts</span>
                </div>
              </div>
            </div>
          )}

          {/* Payment Method */}
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', color: '#1E2D45', textTransform: 'uppercase', marginBottom: 10 }}>Payment Method</div>
          <div style={{ padding: '20px 24px', borderRadius: 16, marginBottom: 20, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)' }}>
            {savedCard ? (
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <div style={{ width: 46, height: 30, borderRadius: 5, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 800, color: '#94A3B8', letterSpacing: '0.04em' }}>
                    {savedCard.brand.toUpperCase()}
                  </div>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 600, color: '#F8FAFC', letterSpacing: '0.08em' }}>•••• •••• •••• {savedCard.last4}</div>
                    <div style={{ fontSize: 11.5, color: '#475569', marginTop: 2 }}>Expires {savedCard.expiry}</div>
                  </div>
                </div>
                <button onClick={() => setSavedCard(null)}
                  style={{ padding: '7px 14px', borderRadius: 7, background: 'transparent', border: '1px solid rgba(255,255,255,0.07)', color: '#475569', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit' }}>
                  Remove
                </button>
              </div>
            ) : showCardForm ? (
              <form onSubmit={handleSaveCard}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 14, marginBottom: 14 }}>
                  <div>
                    <Label>Card Number</Label>
                    <Input value={cardNum} onChange={e => setCardNum(e.target.value)} placeholder="1234 5678 9012 3456" />
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
                    <div style={{ gridColumn: '1/2' }}>
                      <Label>Expiry</Label>
                      <Input value={cardExpiry} onChange={e => setCardExpiry(e.target.value)} placeholder="MM / YY" />
                    </div>
                    <div>
                      <Label>CVC</Label>
                      <Input value={cardCvc} onChange={e => setCardCvc(e.target.value)} placeholder="•••" />
                    </div>
                  </div>
                  <div>
                    <Label>Name on Card</Label>
                    <Input value={cardName} onChange={e => setCardName(e.target.value)} placeholder="Jane Smith" />
                  </div>
                </div>
                <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                  <button type="submit" className="btn-glow"
                    style={{ padding: '12px 24px', borderRadius: 10, fontSize: 13.5, fontWeight: 700, fontFamily: 'inherit' }}>
                    Save Card
                  </button>
                  <button type="button" onClick={() => setShowCardForm(false)}
                    style={{ padding: '10px 16px', borderRadius: 8, background: 'transparent', border: '1px solid rgba(255,255,255,0.09)', color: '#475569', fontSize: 13, cursor: 'pointer', fontFamily: 'inherit' }}>
                    Cancel
                  </button>
                  <span style={{ fontSize: 11, color: '#1E2D45', marginLeft: 4 }}>🔒 Secured by Stripe</span>
                </div>
              </form>
            ) : (
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: '#334155' }}>No card on file</div>
                  <div style={{ fontSize: 12, color: '#1E2D45', marginTop: 3 }}>
                    {plan === 'payg' ? 'Add a card to enable one-click sending' : 'Required for your Automation plan'}
                  </div>
                </div>
                <button onClick={() => setShowCardForm(true)} className="btn-glow"
                  style={{ padding: '10px 20px', borderRadius: 10, fontSize: 13, fontWeight: 700, fontFamily: 'inherit' }}>
                  + Add Card
                </button>
              </div>
            )}
          </div>

          {/* Usage summary — Pay As You Go only */}
          {plan === 'payg' && (
            <div>
              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', color: '#1E2D45', textTransform: 'uppercase', marginBottom: 10 }}>Usage This Month</div>
              <div style={{ borderRadius: 16, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.07)', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', overflow: 'hidden' }}>
                {[
                  { label: 'Postcards Sent', val: '4',     note: '× $4.99 = $19.96' },
                  { label: 'Pending',        val: '2',     note: 'in progress'       },
                  { label: 'Total Billed',   val: '$23.96', note: 'this billing cycle' },
                ].map((s, i) => (
                  <div key={s.label} style={{ padding: '18px 20px', borderRight: i < 2 ? '1px solid rgba(255,255,255,0.06)' : 'none' }}>
                    <div style={{ fontSize: 24, fontWeight: 900, color: '#F8FAFC', letterSpacing: '-0.02em', marginBottom: 3 }}>{s.val}</div>
                    <div style={{ fontSize: 11.5, color: '#334155' }}>{s.label}</div>
                    <div style={{ fontSize: 10.5, color: '#1E2D45', marginTop: 2 }}>{s.note}</div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* ── Automation Setup ── */}
          <div>
            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', color: '#1E2D45', textTransform: 'uppercase', marginBottom: 10 }}>Zapier Automation</div>
            <div style={{ padding: '24px', borderRadius: 16, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.07)' }}>
              <div style={{ fontSize: 15, fontWeight: 700, color: '#F8FAFC', marginBottom: 6 }}>⚡ Auto-Send via Zapier</div>
              <p style={{ fontSize: 13, color: '#475569', lineHeight: 1.6, marginBottom: 20 }}>
                Connect your scheduling software (Jobber, Housecall Pro, ServiceTitan, etc.) to MailFlo via Zapier. When a job is marked complete, a thank-you postcard is automatically sent — no manual steps.
              </p>

              {/* Step list */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 20 }}>
                {[
                  ['1', 'Get your MailFlo API key below'],
                  ['2', 'Create a Zap: Trigger = job completed in your scheduling app'],
                  ['3', 'Action = Webhooks by Zapier → POST → https://mailflo.vercel.app/api/auto-send'],
                  ['4', 'Map fields: api_key, customer_name, customer_address, service, service_date'],
                ].map(([n, text]) => (
                  <div key={n} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                    <div style={{ width: 22, height: 22, borderRadius: '50%', background: 'rgba(0,87,255,0.15)', border: '1px solid rgba(0,87,255,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700, color: '#00A3FF', flexShrink: 0, marginTop: 1 }}>{n}</div>
                    <div style={{ fontSize: 13, color: '#94A3B8', lineHeight: 1.5 }}>{text}</div>
                  </div>
                ))}
              </div>

              {/* API Key section */}
              <div style={{ background: 'rgba(0,0,0,0.2)', borderRadius: 10, padding: '16px' }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: '#475569', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 10 }}>Your API Key</div>
                {plan !== 'automation' ? (
                  <div style={{ textAlign: 'center', padding: '8px 0' }}>
                    <div style={{ fontSize: 13, color: '#475569', marginBottom: 12 }}>API key access requires the Automation Plan.</div>
                    <button onClick={startCheckout} disabled={checkoutLoading} className="btn-glow"
                      style={{ padding: '10px 22px', borderRadius: 8, fontSize: 13, fontWeight: 700, fontFamily: 'inherit' }}>
                      {checkoutLoading ? 'Redirecting…' : '🚀 Upgrade to Automation — $49.99/mo'}
                    </button>
                  </div>
                ) : apiKey ? (
                  <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
                    <div style={{ flex: 1, fontFamily: 'monospace', fontSize: 13, color: '#F8FAFC', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 8, padding: '10px 14px', letterSpacing: '0.05em', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                      {apiKeyVisible ? apiKey : apiKey.slice(0, 6) + '••••••••••••••••••••••••••••••••'}
                    </div>
                    <button onClick={() => setApiKeyVisible(v => !v)}
                      style={{ padding: '10px 14px', borderRadius: 8, background: 'transparent', border: '1px solid rgba(255,255,255,0.1)', color: '#475569', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap' }}>
                      {apiKeyVisible ? 'Hide' : 'Show'}
                    </button>
                    <button onClick={copyKey} className="btn-glow"
                      style={{ padding: '10px 18px', borderRadius: 8, fontSize: 12, fontWeight: 700, fontFamily: 'inherit', whiteSpace: 'nowrap' }}>
                      {apiKeyCopied ? '✓ Copied!' : 'Copy Key'}
                    </button>
                  </div>
                ) : (
                  <button onClick={loadApiKey} disabled={apiKeyLoading} className="btn-glow"
                    style={{ padding: '10px 20px', borderRadius: 8, fontSize: 13, fontWeight: 700, fontFamily: 'inherit' }}>
                    {apiKeyLoading ? 'Generating…' : 'Generate My API Key'}
                  </button>
                )}
                <div style={{ fontSize: 11.5, color: '#1E2D45', marginTop: 10 }}>Keep this key private. Use it as the <code style={{ background: 'rgba(255,255,255,0.06)', padding: '1px 5px', borderRadius: 4 }}>api_key</code> field in your Zapier action.</div>
              </div>

              {/* Webhook URL */}
              <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ fontSize: 12, color: '#334155' }}>Webhook URL:</div>
                <code style={{ fontSize: 12, color: '#00A3FF', background: 'rgba(0,87,255,0.08)', border: '1px solid rgba(0,87,255,0.15)', borderRadius: 6, padding: '4px 10px' }}>
                  https://mailflo.vercel.app/api/auto-send
                </code>
              </div>
            </div>
          </div>

        </div>
      </main>
    </div>
  );
}

// ── App Root ───────────────────────────────────────────────────────
const EMPTY_FORM = { name: '', email: '', phone: '', company: '', address: '', service: '', serviceDate: '', template: '', postcardImage: 'elegant', postcardCustomImage: '' };

function App() {
  const [open, setOpen]     = useState(false);
  const [step, setStep]     = useState(1);
  const [form, setForm]     = useState({ ...EMPTY_FORM });
  const [view, setView]     = useState('home');
  const [user, setUser]     = useState(null);
  const [session, setSession] = useState(null);
  const [showAuth, setShowAuth] = useState(false);

  useEffect(() => {
    if (!sb) return;
    sb.auth.getSession().then(({ data: { session } }) => {
      setSession(session); setUser(session?.user ?? null);
    });
    const { data: { subscription } } = sb.auth.onAuthStateChange((_e, s) => {
      setSession(s); setUser(s?.user ?? null);
    });
    return () => subscription.unsubscribe();
  }, []);

  async function handleLogout() {
    if (sb) await sb.auth.signOut();
    setUser(null); setSession(null);
  }

  function set(key, val) { setForm(f => ({ ...f, [key]: val })); }

  function start() { setForm({ ...EMPTY_FORM }); setStep(1); setOpen(true); }
  function close() { setOpen(false); }
  function done()  { setOpen(false); setForm({ ...EMPTY_FORM }); setStep(1); }

  if (view === 'billing') return <Billing onBack={() => setView('home')} session={session} />;
  if (view === 'history') return <HistoryView user={user} session={session} onBack={() => setView('home')} />;

  return (
    <div style={{ minHeight: '100vh', background: '#05070B', fontFamily: 'Inter,system-ui,sans-serif', color: '#F8FAFC' }}>
      {showAuth && <AuthModal onClose={() => setShowAuth(false)} onSuccess={(u, s) => { setUser(u); setSession(s); setShowAuth(false); }} />}
      <Home onStart={start} onBilling={() => setView('billing')} onHistory={() => setView('history')} user={user} onLogin={() => setShowAuth(true)} onLogout={handleLogout} />
      <Modal open={open} onClose={close}>
        {step === 1 && <StepInfo     form={form} set={set} onNext={() => setStep(2)} onClose={close} />}
        {step === 2 && <StepTemplate form={form} set={set} onNext={() => setStep(3)} onBack={() => setStep(1)} />}
        {step === 3 && <StepPreview  form={form} onBack={() => setStep(2)} onDone={done} user={user} session={session} />}
      </Modal>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);