// DataDial US landing page — components
// React 18 + Babel in-browser. Icons via Lucide.

const { useEffect, useState, useRef } = React;

function useLucide(deps = []) {
  useEffect(() => {
    if (window.lucide) window.lucide.createIcons({ attrs: { 'stroke-width': 1.5 } });
    // eslint-disable-next-line
  }, deps);
}

function Icon({ name, size = 18, className = '', style = {} }) {
  return <i data-lucide={name} className={className} style={{ width: size, height: size, ...style }} />;
}

/* ------------------------------------------------------------------ */
/*  NAV                                                                */
/* ------------------------------------------------------------------ */
function Nav() {
  useLucide();
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className="nav" style={{
      background: scrolled ? 'rgba(255,255,255,0.82)' : 'rgba(255,255,255,0.98)',
      backdropFilter: scrolled ? 'blur(12px)' : 'none', borderColor: "rgb(62, 40, 40)"
    }}>
      <div className="inner">
        <a href="#top" className="mark" aria-label="DataDial home">
          <img src="assets/logo-mark.png" alt="" />
          <span>DataDial</span>
        </a>
        <ul>
          <li><a href="#problem">The problem</a></li>
          <li><a href="#how">How it works</a></li>
          <li><a href="#use-cases">Use cases</a></li>
          <li><a href="#" onClick={(e) => {e.preventDefault();openResearchModal();}}>Research</a></li>
        </ul>
        <div className="right">
          <a className="login" href="#" onClick={(e) => {e.preventDefault();openResearchModal();}}>Get the benchmark</a>
          <a className="btn btn-primary btn-primary-ring" href="https://tally.so/r/yPeoo4?intent=workflow_review" target="_blank" rel="noopener noreferrer" style={{ color: "rgb(255, 255, 255)", backgroundColor: "rgb(165, 97, 241)" }}>Book a workflow review <Icon name="arrow-right" size={14} /></a>
        </div>
      </div>
    </nav>);

}

/* ------------------------------------------------------------------ */
/*  HERO — above the fold                                              */
/* ------------------------------------------------------------------ */
function Hero() {
  useLucide();
  return (
    <header id="top" className="hero-with-shot">
      <div className="hw-grain" aria-hidden="true" />
      <div className="hw-blob-3" aria-hidden="true" />
      <div className="hw-grid">
        <div>
          <span className="eyebrow" style={{ color: "rgb(96, 62, 231)" }}>For med spas &amp; aesthetic clinics · US</span>
          <h1>
            Client communication shouldn't depend on <em>who’s at the front desk today</em>
          </h1>
          <p className="lede">DataDial helps med spas and aesthetic clinics turn every inquiry into a faster, more consistent, human-approved reply — so fewer leads go cold and every patient gets the right level of care


          </p>
          <div className="cta-row">
            <a className="btn btn-primary" href="#" onClick={(e) => {e.preventDefault();openResearchModal();}} style={{ backgroundColor: "rgb(95, 62, 230)" }}>
              Get the 2026 Med Spa Communication Benchmark <Icon name="arrow-right" size={14} />
            </a>
            <a className="btn btn-secondary" href="https://tally.so/r/yPeoo4?intent=workflow_review" target="_blank" rel="noopener noreferrer">
              Book a 20-minute workflow review
            </a>
          </div>
          <div className="microcopy">
            <Icon name="shield-check" size={14} />
            AI drafts the response. Your team reviews before anything is sent.
          </div>
        </div>
        <HeroPreview />
      </div>
    </header>);

}

function HeroPreview() {
  return (
    <img
      className="hero-shot"
      src="assets/product-shot.png"
      alt="DataDial approval workspace — AI-drafted reply awaiting team review"
      loading="eager"
      aria-hidden="true" />);

}

/* ------------------------------------------------------------------ */
/*  PROBLEM BLOCK                                                      */
/* ------------------------------------------------------------------ */
function ProblemBlock() {
  const cards = [
  {
    n: '01',
    h: 'Hot leads cool down while your team is busy',
    p: 'Inbound Instagram DMs, website forms and SMS pile up during consults and after-hours. By the time anyone gets back, the patient has already moved on.'
  },
  {
    n: '02',
    h: 'Reply quality changes from person to person',
    p: 'Tone, pricing, follow-up cadence — all of it drifts between shifts. The first message a patient sees depends on who happens to be at the desk.'
  },
  {
    n: '03',
    h: 'Generic AI creates more risk than confidence',
    p: 'Autopilot chatbots get the tone wrong, miss context, and send messages you wouldn\'t have approved. In premium service, that\'s a brand problem, not a time-saver.'
  }];

  return (
    <section id="problem" className="section-bone">
      <div className="container">
        <span className="eyebrow">The problem</span>
        <h2 className="section-title">
          In high-ticket, repeat-visit businesses, communication <em>shapes the business.</em>
        </h2>
        <p className="section-sub wide">
          Bookings, retention, and brand trust all run through the same narrow
          channel: a handful of coordinators typing into a phone.
        </p>
        <div className="problem-cards">
          {cards.map((c) =>
          <div className="problem-card" key={c.n}>
              <span className="pc-num">{c.n}</span>
              <h3>{c.h}</h3>
              <p>{c.p}</p>
            </div>
          )}
        </div>
        <div className="research-strip context-strip">
          <div className="cs-head">
            <span className="pill" style={{ fontFamily: "system-ui" }}>Context</span>
            <h3 className="cs-title">Why this matters in med spas</h3>
          </div>
          <p className="cs-body">
            The US med spa market is fragmented, high-repeat, and service-sensitive:
            most practices are single-location, average revenue is around $1.4M, and
            repeat patients drive the majority of revenue. That makes every inquiry,
            follow-up, and missed reply part of the revenue engine.
          </p>
          <div className="cs-metrics">
            <div className="cs-metric">
              <span className="cs-num">10k+</span>
              <span className="cs-label">med spa locations in the US</span>
            </div>
            <div className="cs-metric">
              <span className="cs-num">81%</span>
              <span className="cs-label">single-location practices</span>
            </div>
            <div className="cs-metric">
              <span className="cs-num">73%</span>
              <span className="cs-label">repeat patients</span>
            </div>
          </div>
          <p className="cs-source" style={{ fontFamily: "\"Inter Tight\"" }}>
            Source: <a href="#" onClick={(e) => {e.preventDefault();openResearchModal();}}>2026 Med Spa Communication Benchmark</a>, DataDial research (American Med Spa Association industry data, n=10,488 locations).
          </p>
        </div>
      </div>
    </section>);

}

/* ------------------------------------------------------------------ */
/*  WHY NOT GENERIC AI                                                 */
/* ------------------------------------------------------------------ */
function WhyNotGeneric() {
  useLucide();
  const bad = [
  'Inconsistent tone across conversations',
  'Requires constant prompting and correction',
  'Weak context handling across patient history',
  'Risky in sensitive patient conversations',
  'Hard to trust in premium service workflows'];

  const good = [
  'Draft-first support — never autopilot',
  'Role-based assistants for front desk, coordinator, manager',
  'Clinic-specific context: your tone, price sheet, providers',
  'Human review on every message before send',
  'Controlled adoption inside your existing workflow'];

  return (
    <section id="why-not">
      <div className="container">
        <span className="eyebrow">Why not a chatbot</span>
        <h2 className="section-title">
          We're not against AI. We're against <em>unattended</em> AI in sensitive conversations.
        </h2>
        <p className="section-sub wide">
          The goal isn't to replace your coordinators. It's to make your best
          communication process repeatable across the whole team.
        </p>
        <div className="compare">
          <div className="compare-col bad">
            <span className="ctag">Generic AI · autopilot bots</span>
            <h3>The conversation runs itself</h3>
            <ul>
              {bad.map((l, i) =>
              <li key={i}><Icon name="x" size={18} /> {l}</li>
              )}
            </ul>
          </div>
          <div className="compare-col good">
            <span className="ctag">DataDial · HITL workspace</span>
            <h3>Your team runs the conversation — faster</h3>
            <ul>
              {good.map((l, i) =>
              <li key={i}><Icon name="check" size={18} /> {l}</li>
              )}
            </ul>
          </div>
        </div>
        <div className="compare-callout">
          <p>AI should support the relationship — not become the relationship.


          </p>
        </div>
      </div>
    </section>);

}

/* ------------------------------------------------------------------ */
/*  HOW DATADIAL WORKS                                                 */
/* ------------------------------------------------------------------ */
function HowItWorks() {
  useLucide();
  const steps = [
  {
    n: 'Step 01',
    ic: 'inbox',
    h: 'An inquiry comes in',
    p: 'From SMS, website forms, messengers, or follow-up queues — depending on your current setup and integration path.'
  },
  {
    n: 'Step 02',
    ic: 'sparkles',
    h: 'AI prepares a draft',
    p: 'Using the clinic\'s tone, workflows, and approved knowledge — price sheet, providers, calendar.'
  },
  {
    n: 'Step 03',
    ic: 'user-check',
    h: 'Your coordinator reviews and edits',
    p: 'Fast enough to keep response speed high. Controlled enough to keep quality safe.',
    highlight: true,
    tag: 'The human step'
  },
  {
    n: 'Step 04',
    ic: 'send-horizontal',
    h: 'The message goes out with human approval',
    p: 'Your team scales communication without giving up judgment. Every reply has your name on it.'
  }];

  return (
    <section id="how" className="section-bone">
      <div className="container">
        <span className="eyebrow">How DataDial works</span>
        <h2 className="section-title">
          Four steps. One <em>simple rule:</em> nothing sends without a human.
        </h2>
        <p className="section-sub wide">
          DataDial is not a generic chat window. It's a structured work zone
          where your team handles real communication tasks with AI support and
          human control.
        </p>
        <div className="how-steps">
          {steps.map((s, i) =>
          <div className={"how-step" + (s.highlight ? ' highlight' : '')} key={i}>
              <span className="hs-num">{s.n}</span>
              <div className="hs-icon"><Icon name={s.ic} size={20} /></div>
              <h3>{s.h}</h3>
              <p>{s.p}</p>
              {s.tag && <span className="hs-tag">{s.tag}</span>}
            </div>
          )}
        </div>
        <div className="how-explainer">
          <strong>DataDial is not a generic chat window.</strong> It's a
          structured work zone where your team handles real communication tasks
          with AI support and human control.
        </div>
      </div>
    </section>);

}

/* ------------------------------------------------------------------ */
/*  USE CASES                                                          */
/* ------------------------------------------------------------------ */
function UseCases() {
  useLucide();
  const uc = [
  { ic: 'message-circle', h: 'First inquiry replies', p: 'Instant, on-brand first touches across Instagram, SMS, web chat and forms.' },
  { ic: 'clipboard-list', h: 'Consultation prep and follow-up', p: 'Pre-consult context, post-consult summaries, booking confirmations.' },
  { ic: 'message-square-warning', h: 'Objection handling', p: 'Drafts that address price, downtime, safety and scheduling concerns with your exact language.' },
  { ic: 'calendar-clock', h: 'Reschedules and missed replies', p: 'Catch dropped threads, rebook cleanly, surface the ones that still need you.' },
  { ic: 'star', h: 'Review response drafting', p: 'Thoughtful replies to Google and social reviews — never copy-paste, always in your voice.' },
  { ic: 'repeat', h: 'Reactivation messages', p: 'Re-engage dormant patients with timing, offers and tone that match their history.' }];

  return (
    <section id="use-cases">
      <div className="container">
        <span className="eyebrow">Use cases</span>
        <h2 className="section-title">
          Built for the communication tasks your front desk handles <em>every day.</em>
        </h2>
        <p className="section-sub wide">
          Not a broad platform, not a single-feature tool. DataDial solves the
          bundle of related tasks that make up one operational loop.
        </p>
        <div className="uc-grid">
          {uc.map((c, i) =>
          <div className="uc-card" key={i}>
              <div className="uc-ic"><Icon name={c.ic} size={18} /></div>
              <h4>{c.h}</h4>
              <p>{c.p}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ------------------------------------------------------------------ */
/*  RESEARCH & AUTHORITY — modal                                       */
/* ------------------------------------------------------------------ */
function openResearchModal() {
  window.dispatchEvent(new CustomEvent('open-research'));
}

const BENCHMARK_FORM_URL = "https://tally.so/r/LZEo4O?intent=research_bundle";
const WORKFLOW_REVIEW_FORM_URL = "https://tally.so/r/yPeoo4?intent=workflow_review";
const RESEARCH_PLUS_REVIEW_FORM_URL = "https://tally.so/r/eq9Plk?intent=research_plus_review";

// Aliases used in modal
const RESEARCH_BUNDLE_URL = BENCHMARK_FORM_URL;
const RESEARCH_PLUS_REVIEW_URL = RESEARCH_PLUS_REVIEW_FORM_URL;

function ResearchModal() {
  const [open, setOpen] = useState(false);
  useLucide([open]);

  useEffect(() => {
    const onOpen = () => {setOpen(true);};
    window.addEventListener('open-research', onOpen);
    return () => window.removeEventListener('open-research', onOpen);
  }, []);

  useEffect(() => {
    if (!open) return;
    const onKey = (e) => {if (e.key === 'Escape') setOpen(false);};
    document.addEventListener('keydown', onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [open]);

  if (!open) return null;

  return (
    <div className="rm-overlay" onClick={() => setOpen(false)} role="dialog" aria-modal="true" aria-labelledby="rm-title">
      <div className="rm-panel" onClick={(e) => e.stopPropagation()}>
        <button className="rm-close" onClick={() => setOpen(false)} aria-label="Close">
          <Icon name="x" size={18} />
        </button>
        <div className="rm-body">
          <span className="eyebrow">Research &amp; authority</span>
          <h2 id="rm-title" className="rm-title">
            Before you put AI in front of patients, understand what it can <em>cost your clinic.</em>
          </h2>
          <p className="rm-sub">
            Get two research-backed reports on med spa communication, patient trust,
            and human-in-the-loop AI — built for clinic owners and operators evaluating
            AI without handing patient conversations to autonomous bots.
          </p>
          <p className="rm-sub-secondary">
            Includes market benchmarks and evidence for why AI-supported human agents can outperform AI-only workflows.
          </p>

          <div className="rm-stats-strip" role="list">
            <div className="rm-stat" role="listitem">
              <div className="rm-stat-num">10k+</div>
              <div className="rm-stat-label">med spa locations in the US</div>
            </div>
            <div className="rm-stat" role="listitem">
              <div className="rm-stat-num">81%</div>
              <div className="rm-stat-label">single-location practices</div>
            </div>
            <div className="rm-stat" role="listitem">
              <div className="rm-stat-num">73%</div>
              <div className="rm-stat-label">repeat patients</div>
            </div>
          </div>
          <p className="rm-stats-source">
            Source: 2026 Med Spa Communication Benchmark, DataDial research (American Med Spa Association industry data, n=10,488 locations).
          </p>

          <div className="research-grid">
            <div className="research-card">
              <span className="rc-tag">REPORT 1 · MARKET BENCHMARK</span>
              <h3>2026 Med Spa Communication <em>Benchmark</em></h3>
              <p>A practical market brief on why response speed, follow-up quality, and front-desk consistency now matter directly to bookings, repeat visits, and revenue in aesthetic clinics.</p>
              <div className="rc-chips">
                <span className="rc-chip">Market data</span>
                <span className="rc-chip">Med spa economics</span>
                <span className="rc-chip">Front-desk bottlenecks</span>
              </div>
            </div>
            <div className="research-card">
              <span className="rc-tag">REPORT 2 · AI TRUST BRIEF</span>
              <h3>Human-in-the-Loop AI for <em>Aesthetic Clinics</em></h3>
              <p>A concise brief on why fully autonomous AI can create trust, liability, and brand risks — and why human-reviewed AI workflows are better suited for premium patient communication.</p>
              <div className="rc-chips">
                <span className="rc-chip">HITL framework</span>
                <span className="rc-chip">AI trust gap</span>
                <span className="rc-chip">Patient communication risk</span>
              </div>
            </div>
          </div>

          <div className="rm-cta-block">
            <div className="rm-cta-text">
              <h4>Get the research bundle</h4>
              <p>
                Access both reports on med spa communication, patient trust, and
                human-in-the-loop AI. If you want, you can also request a short
                workflow review for your clinic.
              </p>
            </div>
            <div className="rm-cta-actions">
              <a
                className="btn btn-primary rm-cta-primary"
                href={RESEARCH_BUNDLE_URL}
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Get both reports"
                style={{ backgroundColor: "rgb(95, 62, 230)" }}>
                Get both reports <Icon name="arrow-right" size={14} />
              </a>
              <a
                className="btn btn-secondary rm-cta-secondary"
                href={RESEARCH_PLUS_REVIEW_URL}
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Get reports and request a workflow review">
                Get reports + request a workflow review
              </a>
            </div>
            <p className="rm-cta-microcopy">
              Both options give you access to the reports. The workflow review is optional.
            </p>
          </div>
        </div>
      </div>
    </div>);
}

/* ------------------------------------------------------------------ */
/*  COMPETITIVE GAP                                                    */
/* ------------------------------------------------------------------ */
function CompetitiveGap() {
  return (
    <section id="gap">
      <div className="container">
        <span className="eyebrow">Where we fit</span>
        <h2 className="section-title">
          Between fragmented tools and <em>full autopilot.</em>
        </h2>
        <p className="section-sub wide">
          Plenty of categories already exist. We don't try to span them. We sit
          in the operational gap they leave behind.
        </p>
        <div className="gap-grid">
          <div className="gap-col">
            <span className="gc-tag">Patient engagement suites</span>
            <h4>Reminders, scheduling, communication flows</h4>
            <p>Good for reminders and scheduling flows. Less useful when your team needs to craft a careful, high-context reply.</p>
          </div>
          <div className="gap-col">
            <span className="gc-tag">AI employees · lead bots</span>
            <h4>Automate the conversation</h4>
            <p>Try to talk to leads with little human oversight. Fragile in premium, high-context service.</p>
          </div>
          <div className="gap-col us">
            <span className="gc-tag">DataDial</span>
            <h4>Help your team communicate better — in real time</h4>
            <p>AI assistance with human control, sitting inside your existing front-desk workflow.</p>
          </div>
        </div>
        <p className="gap-line">
          We sit between fragmented tools and full autopilot — giving your team
          speed without giving up judgment.
        </p>
      </div>
    </section>);

}

/* ------------------------------------------------------------------ */
/*  COMPLIANCE & CONTROL FAQ                                           */
/* ------------------------------------------------------------------ */
function ComplianceFAQ() {
  const faqs = [
  {
    q: 'Does DataDial replace our coordinators?',
    a: 'No. It supports your team with faster drafting and more consistent execution. People still run the conversation.'
  },
  {
    q: 'Is this an autonomous chatbot?',
    a: 'No. Human review stays in the loop. No message goes to a patient without a person reviewing and approving it.'
  },
  {
    q: 'How do you approach privacy-sensitive workflows?',
    a: 'We design for role-based access, controlled workflows, and deployment requirements specific to healthcare communication environments.'
  },
  {
    q: 'Can this work alongside our current systems?',
    a: 'Yes. The goal is to improve front-desk communication workflows — not force a full system replacement.'
  }];

  return (
    <section id="compliance" className="section-bone">
      <div className="container">
        <span className="eyebrow">Compliance &amp; control</span>
        <h2 className="section-title">
          Built for privacy-sensitive clinic <em>workflows.</em>
        </h2>
        <p className="section-sub wide">
          We're precise about what DataDial does and doesn't do — especially
          where patient communication, governance, and accountability meet.
        </p>
        <div className="faq-list">
          {faqs.map((f, i) =>
          <div className="faq-item" key={i}>
              <h4>{f.q}</h4>
              <p>{f.a}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ------------------------------------------------------------------ */
/*  FINAL CTA                                                          */
/* ------------------------------------------------------------------ */
function FinalCTA() {
  useLucide();
  return (
    <section id="workflow-review" className="final-cta">
      <div className="container">
        <span className="eyebrow">Workflow review</span>
        <h2>
          See where your front-desk communication <em>is slowing down revenue.</em>
        </h2>
        <p className="lede">
          We'll map where inquiries slow down, where reply quality becomes
          inconsistent, and where AI can support your team — without removing
          human control.
        </p>
        <div className="cta-row">
          <a className="btn btn-primary" href="https://tally.so/r/yPeoo4?intent=workflow_review" target="_blank" rel="noopener noreferrer" style={{ fontSize: 15, padding: '13px 22px' }}>
            Book a 20-minute workflow review <Icon name="arrow-right" size={14} />
          </a>
          <a className="btn btn-secondary" href="#" onClick={(e) => {e.preventDefault();openResearchModal();}} style={{ fontSize: 15, padding: '13px 22px' }}>
            Download the Med Spa Benchmark
          </a>
        </div>
        <p className="reassure">
          You'll leave with a clear view of where response quality, speed, and
          follow-up are breaking down — and whether a human-in-the-loop workflow
          is the right fit for your clinic.
        </p>
      </div>
    </section>);

}

/* ------------------------------------------------------------------ */
/*  FOOTER                                                             */
/* ------------------------------------------------------------------ */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="top">
          <div className="brand-block">
            <div className="mark">
              <img src="assets/logo-mark.png" alt="" />
              <span>DataDial</span>
            </div>
            <p>A communication operating layer for premium outpatient clinics. EU &amp; US based.</p>
          </div>
          <div>
            <h5>Product</h5>
            <ul>
              <li><a href="#how">How it works</a></li>
              <li><a href="#use-cases">Use cases</a></li>
              <li><a href="#why-not">Why not a chatbot</a></li>
              <li><a href="#compliance">Compliance</a></li>
            </ul>
          </div>
          <div>
            <h5>Practice</h5>
            <ul>
              <li><a href="#">Med spas</a></li>
              <li><a href="#">Aesthetic medicine</a></li>
              <li><a href="#">Cosmetic dermatology</a></li>
              <li><a href="#">Plastic surgery</a></li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="#" onClick={(e) => {e.preventDefault();openResearchModal();}}>Research</a></li>
              <li><a href="#workflow-review">Workflow review</a></li>
              <li><a href="mailto:info@datadial.io">Contact</a></li>
              <li><a href="privacy/index.html">Privacy</a></li>
            </ul>
          </div>
        </div>
        <div className="bot">
          <span className="legal">© 2026 DataDial. Operated by Admirable Ceremony Unipessoal Lda.</span>
          <span className="contact">
            <a href="https://datadial.io">datadial.io</a>
            &nbsp;·&nbsp;
            <a href="mailto:info@datadial.io">info@datadial.io</a>
          </span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  Nav, Hero, ProblemBlock, WhyNotGeneric, HowItWorks, UseCases,
  ResearchModal, CompetitiveGap, ComplianceFAQ, FinalCTA, Footer, Icon,
  openResearchModal
});