/* global React, Button, Card, Badge, Section, SectionHeader, Input */
const { useState } = React;

// ──────────────────────────────────────────
// ROI Calculator
// ──────────────────────────────────────────
function ROICalculator({ industryId }) {
  const [loc] = window.BD.useLocale();
  const c = window.BD.COPY[loc];
  const industry = window.BD.localIndustry(industryId, loc);

  const [callsPerDay, setCallsPerDay] = useState(industry.callsPerDay);
  const [missRate, setMissRate] = useState(Math.round(industry.missRate * 100));
  const [avgTicket, setAvgTicket] = useState(industry.avgTicket);
  const [conversion, setConversion] = useState(35);

  React.useEffect(() => {
    setCallsPerDay(industry.callsPerDay);
    setMissRate(Math.round(industry.missRate * 100));
    setAvgTicket(industry.avgTicket);
  }, [industry.id]);

  const monthlyMissed = callsPerDay * 24 * (missRate / 100);
  const lostBookings = monthlyMissed * (conversion / 100);
  const lostRevenue = lostBookings * avgTicket;
  const recoverable = lostRevenue * 0.78;

  const krw = (n) => {
    if (loc === 'en') return '₩' + Math.round(n).toLocaleString('en-US');
    return '₩' + Math.round(n).toLocaleString('ko-KR');
  };

  const Slider = ({ label, value, setValue, min, max, step = 1, unit, suffix }) => (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '10px' }}>
        <div style={{ fontSize: '14px', fontWeight: 500, opacity: 0.85 }}>{label}</div>
        <div className="tabular" style={{ fontSize: '17px', fontWeight: 600, color: 'var(--color-signal)' }}>
          {value.toLocaleString(loc === 'ko' ? 'ko-KR' : 'en-US')}{unit}{suffix ? ' ' + suffix : ''}
        </div>
      </div>
      <input type="range" min={min} max={max} step={step} value={value}
        onChange={e => setValue(Number(e.target.value))}
        style={{ width: '100%', accentColor: 'var(--color-signal)', height: '4px' }}/>
    </div>
  );

  return (
    <Section id="roi" bg="ivory">
      <SectionHeader eyebrow={c.roi.eyebrow} title={c.roi.title} subtitle={c.roi.sub} />

      <div style={{
        display: 'grid', gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 1fr)',
        gap: '32px', alignItems: 'stretch',
      }} className="roi-grid">
        <Card variant="default" style={{ padding: '36px' }}>
          <div style={{ marginBottom: '24px' }}>
            <Badge variant="trust">{c.roi.basis(industry.fullLabel)}</Badge>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '28px' }}>
            <Slider label={c.roi.avgCalls}   value={callsPerDay} setValue={setCallsPerDay} min={5} max={120} unit="" suffix={c.roi.calls} />
            <Slider label={c.roi.missRate}   value={missRate}    setValue={setMissRate}    min={5} max={70}  unit={c.roi.percent} />
            <Slider label={c.roi.avgTicket}  value={avgTicket}   setValue={setAvgTicket}   min={50000} max={1500000} step={10000} unit="" suffix={c.roi.won} />
            <Slider label={c.roi.conversion} value={conversion}  setValue={setConversion}  min={10} max={80}  unit={c.roi.percent} />
          </div>
        </Card>

        <div style={{
          background: 'var(--color-trust)', color: 'var(--color-ivory)',
          borderRadius: '20px', padding: '36px',
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        }}>
          <div>
            <div style={{ fontSize: '12px', fontFamily: 'IBM Plex Mono, monospace', opacity: 0.6, letterSpacing: '0.12em', marginBottom: '8px' }}>
              {c.roi.lossLabel}
            </div>
            <div className="tabular" style={{
              fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 700, lineHeight: 1.05,
              color: 'var(--color-signal)', letterSpacing: '-0.04em',
            }}>{krw(lostRevenue)}</div>
            <div style={{ marginTop: '8px', fontSize: '14px', opacity: 0.7 }}>
              {c.roi.lossDetail(Math.round(monthlyMissed), Math.round(lostBookings))}
            </div>
          </div>

          <div style={{ height: '1px', background: 'rgba(255,255,255,0.12)', margin: '32px 0' }}/>

          <div>
            <div style={{ fontSize: '12px', fontFamily: 'IBM Plex Mono, monospace', opacity: 0.6, letterSpacing: '0.12em', marginBottom: '8px' }}>
              {c.roi.recoverLabel}
            </div>
            <div className="tabular" style={{
              fontSize: 'clamp(32px, 4vw, 48px)', fontWeight: 700, lineHeight: 1.05,
              color: 'var(--color-sage)', letterSpacing: '-0.04em',
            }}>+{krw(recoverable)}</div>
            <div style={{ marginTop: '6px', fontSize: '13px', opacity: 0.65 }}>
              {c.roi.recoverDetail(krw(recoverable * 12))}
            </div>
          </div>

          <div style={{ marginTop: '32px' }}>
            <Button variant="primary" size="md" fullWidth
              onClick={() => document.getElementById('cta')?.scrollIntoView({ behavior: 'smooth' })}>
              {c.roi.cta}
            </Button>
          </div>
        </div>
      </div>
    </Section>
  );
}

// ──────────────────────────────────────────
// Trust + Compliance strip
// ──────────────────────────────────────────
function TrustStrip() {
  const [loc] = window.BD.useLocale();
  const c = window.BD.COPY[loc];
  return (
    <Section id="trust" bg="hanji" dense>
      <SectionHeader eyebrow={c.trust.eyebrow} title={c.trust.title} />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '16px' }}>
        {c.trust.items.map((t, i) => (
          <div key={i} style={{
            background: 'rgba(255,255,255,0.6)', border: '1px solid rgba(26,26,26,0.06)',
            borderRadius: '14px', padding: '20px 22px',
          }}>
            <div style={{ marginBottom: '10px' }}>
              <Badge variant="trust">{t.label}</Badge>
            </div>
            <div style={{ fontSize: '14px', lineHeight: 1.5, color: 'rgba(26,26,26,0.75)' }}>{t.desc}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ──────────────────────────────────────────
// Design Partners
// ──────────────────────────────────────────
function DesignPartners() {
  const [loc] = window.BD.useLocale();
  const c = window.BD.COPY[loc];
  return (
    <Section id="partners" bg="ivory">
      <SectionHeader eyebrow={c.partners.eyebrow} title={c.partners.title} subtitle={c.partners.sub} />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '16px' }}>
        {c.partners.slots.map((s, i) => {
          const ind = window.BD.localIndustry(s.vertId, loc);
          return (
            <div key={i} style={{
              background: 'var(--color-hanji)', border: '1px solid rgba(26,26,26,0.06)',
              borderRadius: '20px', padding: '28px 24px',
              display: 'flex', flexDirection: 'column', gap: '16px', minHeight: '220px',
            }}>
              <div className="img-placeholder" style={{ height: '64px', width: '64px', borderRadius: '50%' }}>LOGO</div>
              <div>
                <Badge variant="neutral">{ind.label}</Badge>
                <h4 className="headline" style={{ fontSize: '20px', fontWeight: 700, margin: '12px 0 4px' }}>{s.name}</h4>
                <div style={{ fontSize: '13px', opacity: 0.6 }}>{s.loc} · {c.partners.betaSuffix}</div>
              </div>
              <div style={{ marginTop: 'auto', fontSize: '13px', lineHeight: 1.5, opacity: 0.55, fontStyle: 'italic' }}>
                {c.partners.quote}
              </div>
            </div>
          );
        })}
      </div>
    </Section>
  );
}

// ──────────────────────────────────────────
// Pricing Inquiry
// ──────────────────────────────────────────
function PricingInquiry() {
  const [loc] = window.BD.useLocale();
  const c = window.BD.COPY[loc];
  return (
    <Section id="pricing" bg="hanji">
      <SectionHeader eyebrow={c.pricing.eyebrow} title={c.pricing.title} subtitle={c.pricing.sub} />
      <div style={{
        background: 'var(--color-ivory)', border: '1px solid rgba(26,26,26,0.06)',
        borderRadius: '24px', padding: '40px',
        display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
        gap: '40px', alignItems: 'center',
      }} className="pricing-grid">
        <div>
          <h3 className="headline" style={{ fontSize: '28px', fontWeight: 700, margin: 0, lineHeight: 1.25, whiteSpace: 'pre-line' }}>
            {c.pricing.headline}
          </h3>
          <ul style={{ marginTop: '24px', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '12px' }}>
            {c.pricing.bullets.map((t, i) => (
              <li key={i} style={{ display: 'flex', gap: '10px', alignItems: 'center', fontSize: '15px' }}>
                <span style={{ width: '6px', height: '6px', borderRadius: '50%', background: 'var(--color-signal)', flexShrink: 0 }}/>
                {t}
              </li>
            ))}
          </ul>
        </div>
        <div style={{ background: 'var(--color-hanji)', borderRadius: '16px', padding: '28px', textAlign: 'center' }}>
          <div style={{ fontSize: '11px', fontFamily: 'IBM Plex Mono, monospace', letterSpacing: '0.12em', opacity: 0.55 }}>
            {c.pricing.contactLabel}
          </div>
          <div style={{ marginTop: '8px', fontSize: '17px', lineHeight: 1.6, opacity: 0.75 }}>{c.pricing.emailLabel}</div>
          <div className="tabular" style={{ fontSize: '20px', fontWeight: 600, marginBottom: '24px' }}>hello@badeum.com</div>
          <Button variant="primary" size="lg" fullWidth
            onClick={() => document.getElementById('cta')?.scrollIntoView({ behavior: 'smooth' })}>
            {c.pricing.cta}
          </Button>
        </div>
      </div>
    </Section>
  );
}

// ──────────────────────────────────────────
// FAQ
// ──────────────────────────────────────────
function FAQSection() {
  const [loc] = window.BD.useLocale();
  const c = window.BD.COPY[loc];
  const [open, setOpen] = useState(0);
  return (
    <Section id="faq" bg="ivory">
      <SectionHeader eyebrow={c.faq.eyebrow} title={c.faq.title} />
      <div style={{ maxWidth: '820px', margin: '0 auto' }}>
        {c.faq.items.map((item, i) => {
          const isOpen = open === i;
          return (
            <div key={i} style={{
              borderTop: '1px solid rgba(26,26,26,0.1)',
              borderBottom: i === c.faq.items.length - 1 ? '1px solid rgba(26,26,26,0.1)' : 'none',
            }}>
              <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                width: '100%', textAlign: 'left', padding: '24px 0',
                background: 'transparent', border: 'none',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                fontFamily: 'inherit', cursor: 'pointer',
                fontSize: '17px', fontWeight: 600, color: 'var(--color-charcoal)', letterSpacing: '-0.01em',
              }}>
                <span style={{ paddingRight: '24px' }}>{item.q}</span>
                <span style={{
                  fontSize: '24px', color: 'var(--color-signal)',
                  transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                  transition: 'transform 0.2s ease', display: 'inline-block', fontWeight: 300,
                }}>+</span>
              </button>
              <div style={{
                maxHeight: isOpen ? '300px' : '0px', overflow: 'hidden',
                transition: 'max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease',
                opacity: isOpen ? 1 : 0, paddingBottom: isOpen ? '24px' : '0',
                fontSize: '15px', lineHeight: 1.7, color: 'rgba(26,26,26,0.75)', paddingRight: '40px',
              }}>{item.a}</div>
            </div>
          );
        })}
      </div>
    </Section>
  );
}

// ──────────────────────────────────────────
// Final CTA
// ──────────────────────────────────────────
function FinalCTA() {
  const [loc] = window.BD.useLocale();
  const c = window.BD.COPY[loc];
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ name: '', biz: '', phone: '', vert: 'dental' });
  const onSubmit = (e) => { e.preventDefault(); setSubmitted(true); };
  return (
    <Section id="cta" bg="charcoal" style={{ color: 'var(--color-ivory)' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
        gap: '64px', alignItems: 'center',
      }} className="cta-grid">
        <div>
          <Badge variant="orange">{c.cta.badge}</Badge>
          <h2 className="headline" style={{
            fontSize: 'clamp(36px, 5vw, 64px)', fontWeight: 800, lineHeight: 1.1,
            margin: '20px 0 24px', whiteSpace: 'pre-line',
          }}>{c.cta.title}</h2>
          <p style={{ fontSize: '18px', lineHeight: 1.6, opacity: 0.75, margin: 0, maxWidth: '520px' }}>
            {c.cta.sub}
          </p>
          <div style={{ marginTop: '32px', fontSize: '13px', opacity: 0.5, fontFamily: 'IBM Plex Mono, monospace' }}>
            {c.cta.meta}
          </div>
        </div>

        <div style={{
          background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.12)',
          borderRadius: '20px', padding: '32px',
        }}>
          {submitted ? (
            <div style={{ textAlign: 'center', padding: '32px 16px' }}>
              <div style={{
                width: '56px', height: '56px', borderRadius: '50%',
                background: 'var(--color-sage)', color: 'var(--color-charcoal)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                margin: '0 auto 20px', fontSize: '28px',
              }}>✓</div>
              <h3 className="headline" style={{ fontSize: '22px', fontWeight: 700, margin: '0 0 8px' }}>
                {c.cta.successTitle}
              </h3>
              <p style={{ fontSize: '14px', opacity: 0.7, lineHeight: 1.6, margin: 0, whiteSpace: 'pre-line' }}>
                {c.cta.successBody(form.name)}
              </p>
            </div>
          ) : (
            <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
              <Input label={c.cta.formName} placeholder={c.cta.namePh}
                value={form.name} onChange={e => setForm({ ...form, name: e.target.value })}
                style={{ background: 'rgba(255,255,255,0.04)', color: 'var(--color-ivory)', borderColor: 'rgba(255,255,255,0.15)' }}/>
              <Input label={c.cta.formBiz} placeholder={c.cta.bizPh}
                value={form.biz} onChange={e => setForm({ ...form, biz: e.target.value })}
                style={{ background: 'rgba(255,255,255,0.04)', color: 'var(--color-ivory)', borderColor: 'rgba(255,255,255,0.15)' }}/>
              <Input label={c.cta.formPhone} placeholder={c.cta.phonePh} type="tel"
                value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })}
                style={{ background: 'rgba(255,255,255,0.04)', color: 'var(--color-ivory)', borderColor: 'rgba(255,255,255,0.15)' }}/>
              <div>
                <div style={{ fontSize: '13px', fontWeight: 500, opacity: 0.8, marginBottom: '8px' }}>{c.cta.formVert}</div>
                <select value={form.vert} onChange={e => setForm({ ...form, vert: e.target.value })} style={{
                  width: '100%', height: '48px',
                  background: 'rgba(255,255,255,0.04)', color: 'var(--color-ivory)',
                  border: '1px solid rgba(255,255,255,0.15)',
                  borderRadius: '12px', padding: '0 16px',
                  fontSize: '15px', fontFamily: 'inherit',
                }}>
                  {window.BD.INDUSTRIES.map(i => {
                    const ind = window.BD.localIndustry(i.id, loc);
                    return <option key={i.id} value={i.id} style={{ color: '#000' }}>{ind.fullLabel}</option>;
                  })}
                </select>
              </div>
              <Button type="submit" variant="primary" size="lg" fullWidth>{c.cta.submit}</Button>
              <p style={{ fontSize: '11px', opacity: 0.5, textAlign: 'center', margin: '4px 0 0', lineHeight: 1.5 }}>
                {c.cta.privacy}
              </p>
            </form>
          )}
        </div>
      </div>
    </Section>
  );
}

// ──────────────────────────────────────────
// Footer
// ──────────────────────────────────────────
function Footer() {
  const [loc] = window.BD.useLocale();
  const c = window.BD.COPY[loc];
  return (
    <footer style={{ background: 'var(--color-charcoal)', color: 'var(--color-ivory)', padding: '64px 0 32px' }}>
      <div style={{ maxWidth: '1280px', margin: '0 auto', padding: '0 24px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr)',
          gap: '48px', marginBottom: '48px',
        }} className="footer-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
              <BadeumMarkFooter />
              <span style={{ fontWeight: 700, fontSize: '20px' }}>{c.brand}</span>
            </div>
            <p style={{ fontSize: '14px', lineHeight: 1.6, opacity: 0.6, margin: 0, maxWidth: '380px' }}>
              {c.footer.tagline}
            </p>
          </div>
          <div>
            <div style={{ fontSize: '12px', fontFamily: 'IBM Plex Mono, monospace', opacity: 0.5, letterSpacing: '0.12em', marginBottom: '14px' }}>
              {c.footer.productHeader}
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '10px' }}>
              {c.footer.productLinks.map(([h,l]) => (
                <li key={h}><a href={h} style={{ fontSize: '14px', color: 'var(--color-ivory)', opacity: 0.7, textDecoration: 'none' }}>{l}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <div style={{ fontSize: '12px', fontFamily: 'IBM Plex Mono, monospace', opacity: 0.5, letterSpacing: '0.12em', marginBottom: '14px' }}>
              {c.footer.companyHeader}
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '10px' }}>
              <li><a href="/privacy" style={{ fontSize: '14px', color: 'var(--color-ivory)', opacity: 0.7, textDecoration: 'none' }}>{c.footer.privacy}</a></li>
              <li><a href="/terms" style={{ fontSize: '14px', color: 'var(--color-ivory)', opacity: 0.7, textDecoration: 'none' }}>{c.footer.terms}</a></li>
              <li><a href="mailto:hello@badeum.com" style={{ fontSize: '14px', color: 'var(--color-ivory)', opacity: 0.7, textDecoration: 'none' }}>hello@badeum.com</a></li>
            </ul>
          </div>
        </div>

        <div style={{
          padding: '24px 0', borderTop: '1px solid rgba(255,255,255,0.08)',
          fontSize: '12px', opacity: 0.5, lineHeight: 1.7,
          fontFamily: 'IBM Plex Mono, monospace',
        }}>
          <div>{c.footer.legal}</div>
          <div>{c.footer.address}</div>
          <div style={{ marginTop: '12px' }}>{c.footer.copyright}</div>
        </div>
      </div>
    </footer>
  );
}

function BadeumMarkFooter() {
  return (
    <svg width="28" height="28" viewBox="0 0 32 32" fill="none" aria-hidden>
      <rect x="0" y="0" width="32" height="32" rx="8" fill="#FAF7F2" />
      <path d="M9 10 C9 8.5, 10.5 7, 12 7 L20 7 C21.5 7, 23 8.5, 23 10 L23 16 L20 19 L20 22 L13 22 L9 18 Z" fill="#FF6A2C" />
      <circle cx="16" cy="13.5" r="1.6" fill="#FAF7F2" />
    </svg>
  );
}

Object.assign(window, { ROICalculator, TrustStrip, DesignPartners, PricingInquiry, FAQSection, FinalCTA, Footer });