// =====================================================================
// AINZ marketing site - all sections.
// =====================================================================

// ----------- Nav -----------------------------------------------------
function SiteNav() {
  const [whoOpen, setWhoOpen] = React.useState(false);
  const whoRef = React.useRef(null);

  // Close on click outside
  React.useEffect(() => {
    if (!whoOpen) return;
    const onDocClick = (e) => {
      if (whoRef.current && !whoRef.current.contains(e.target)) setWhoOpen(false);
    };
    const onKey = (e) => { if (e.key === 'Escape') setWhoOpen(false); };
    document.addEventListener('mousedown', onDocClick);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDocClick);
      document.removeEventListener('keydown', onKey);
    };
  }, [whoOpen]);

  const audiences = [
    {
      label: "Tradies",
      href: "ai-receptionist-for-trades.html",
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
        </svg>
      )
    },
    {
      label: "Healthcare",
      href: "ai-receptionist-for-healthcare.html",
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M4.8 2.3A.3.3 0 1 0 5 2H4a2 2 0 0 0-2 2v5a6 6 0 0 0 6 6 6 6 0 0 0 6-6V4a2 2 0 0 0-2-2h-1a.2.2 0 1 0 .3.3" />
          <path d="M8 15v3a4 4 0 0 0 8 0v-1" />
          <circle cx="20" cy="10" r="2" />
        </svg>
      )
    },
    {
      label: "Professional services",
      href: "ai-receptionist-for-professional-services.html",
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <rect x="2" y="7" width="20" height="14" rx="2" />
          <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
        </svg>
      )
    },
    {
      label: "Hospitality",
      href: "ai-receptionist-for-hospitality.html",
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M3 2v7a3 3 0 0 0 3 3h0a3 3 0 0 0 3-3V2" />
          <path d="M6 12v10" />
          <path d="M18 2v20" />
          <path d="M14 8c0-3 1.5-6 4-6v6h-4z" />
        </svg>
      )
    },
  ];

  // Path-aware base prefix so the nav works from /blog/ subfolder pages too
  const base = (typeof window !== 'undefined' && /\/blog\//.test(window.location.pathname)) ? '../' : '';

  return (
    <nav className="nav" aria-label="Primary">
      <a href={base + "index.html"} className="nav-logo"><span className="mark" aria-hidden="true"></span>Ainz</a>
      <ul className="nav-links">
        <li><a href={base + "features.html"}>Features</a></li>
        <li><a href={base + "how-it-works.html"}>How it works</a></li>
        <li className={"has-dropdown" + (whoOpen ? " is-open" : "")} ref={whoRef}>
          <button
            type="button"
            className="nav-dropdown-trigger"
            aria-haspopup="true"
            aria-expanded={whoOpen}
            onClick={() => setWhoOpen(o => !o)}>
            Who we help
            <svg className="nav-chev" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <polyline points="6 9 12 15 18 9"></polyline>
            </svg>
          </button>
          <div className="nav-dropdown" role="menu">
            {audiences.map(a => (
              <div
                key={a.href}
                role="menuitem"
                tabIndex={0}
                style={{ cursor: 'pointer' }}
                onClick={() => { setWhoOpen(false); window.location.href = base + a.href; }}
                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setWhoOpen(false); window.location.href = base + a.href; } }}>
                <span className="nav-dd-icon" aria-hidden="true">{a.icon}</span>
                <span className="nav-dd-label">{a.label}</span>
              </div>
            ))}
          </div>
        </li>
        <li><a href={base + "pricing.html"}>Pricing</a></li>
      </ul>
      <div className="nav-right">
        <a href="https://cal.com/ainz-ai/ainz-discovery-call" target="_blank" rel="noopener noreferrer" className="btn btn-primary btn-sm" style={{ color: "rgb(255, 255, 255)" }}>
          Book a demo
        </a>
      </div>
    </nav>);

}

// ----------- Hero ----------------------------------------------------
function HeroBlock() {
  return (
    <header className="mesh-bg">
      <SiteNav />
      <div className="container hero">
        <span className="live-pill">
          <span className="dot"></span>
          Now answering calls across Australia
        </span>
        <h1>
          Never miss <span className="accent">another call.</span>
          <span className="sub">Every missed call is lost revenue.</span>
        </h1>
        <p className="lead" style={{ fontSize: "17px" }}>AINZ answers every line for your business - books appointments, handles FAQs, and captures leads 24/7. Meet Australia's most human sounding AI Agent.


        </p>
        <div className="ctas">
          <a href="tel:+61370504411" className="btn btn-primary">
            <IconPhone size={16} /> Hear it in action
          </a>
          <a href="https://cal.com/ainz-ai/ainz-discovery-call" target="_blank" rel="noopener noreferrer" className="btn btn-secondary">Book a demo</a>
        </div>
        <ul className="trust-row">
          <li><span className="tick"><IconCheck size={11} /></span>2-week free trial.</li>
          <li><span className="tick"><IconCheck size={11} /></span>Cancel any time.</li>
        </ul>

        <HeroCallCard />
      </div>
    </header>);

}

// Animated transcript card under the hero - plays bubbles in sequence.
function HeroCallCard() {
  const script = [
  { kind: 'typing', who: 'them', ms: 1400 },
  { kind: 'bubble', who: 'them', text: "Hi, I've had a chipped tooth since last night and it's pretty sore - can I get in to see someone today?", ms: 2200 },
  { kind: 'typing', who: 'ai', ms: 900 },
  { kind: 'bubble', who: 'ai', text: "Sorry to hear that. We have an emergency slot at 2:15 this afternoon with Dr Patel. Shall I lock that in?", ms: 2600 },
  { kind: 'typing', who: 'them', ms: 1100 },
  { kind: 'bubble', who: 'them', text: "Yeah perfect, thanks.", ms: 1600 },
  { kind: 'outcome', ms: 4000 }];


  const [step, setStep] = React.useState(0);
  const [elapsed, setElapsed] = React.useState(94);

  React.useEffect(() => {
    const t = setInterval(() => setElapsed((e) => e + 1), 1000);
    return () => clearInterval(t);
  }, []);

  React.useEffect(() => {
    const cur = script[step];
    const t = setTimeout(() => setStep((s) => (s + 1) % script.length), cur.ms);
    return () => clearTimeout(t);
  }, [step]);

  // Build the visible list of completed bubbles up to (but not including) current step,
  // then append any current bubble/outcome; track typing indicator separately.
  let typingFor = null;
  const visible = [];
  for (let i = 0; i < step; i++) {
    const s = script[i];
    if (s.kind === 'bubble') visible.push(s);else
    if (s.kind === 'outcome') visible.push({ kind: 'outcome' });
  }
  const cur = script[step];
  if (cur) {
    if (cur.kind === 'typing') typingFor = cur.who;else
    if (cur.kind === 'bubble') visible.push(cur);else
    if (cur.kind === 'outcome') visible.push({ kind: 'outcome' });
  }

  const mm = String(Math.floor(elapsed / 60)).padStart(1, '0');
  const ss = String(elapsed % 60).padStart(2, '0');

  return (
    <div className="hero-call-card">
      <div className="left">
        <div className="meta"><span className="live"></span>Live call</div>
        <div>
          <div className="num">+61 7 3210 4488</div>
          <div className="caller">Riverside Dental Practice</div>
        </div>
        <div className="timer">
          <span className="wave">
            <span style={{ animationDelay: '0s' }}></span>
            <span style={{ animationDelay: '0.15s' }}></span>
            <span style={{ animationDelay: '0.3s' }}></span>
            <span style={{ animationDelay: '0.45s' }}></span>
            <span style={{ animationDelay: '0.6s' }}></span>
          </span>
          {mm}:{ss}
        </div>
      </div>
      <div className="right">
        <div className="transcript">
          {visible.map((s, i) => {
            if (s.kind === 'outcome') {
              return (
                <div className="outcome-row" key={'out' + i}>
                  <span className="pill">Booked</span>
                  Added to the practice diary - confirmation SMS sent.
                </div>);

            }
            return (
              <div className={"bubble " + s.who} key={i}>
                <span className="speaker">{s.who === 'ai' ? 'AINZ' : 'Caller'}</span>
                {s.text}
              </div>);

          })}
          {typingFor &&
          <div className={"bubble typing " + typingFor} aria-label="typing">
              <span className="speaker">{typingFor === 'ai' ? 'AINZ' : 'Caller'}</span>
              <span className="typing-dots">
                <span></span><span></span><span></span>
              </span>
            </div>
          }
        </div>
      </div>
    </div>);

}

// ----------- Logo marquee - "Works with your existing tools" ---------
function LogoMarquee() {
  // Integration logos are bundled locally - external CDNs (svgl paths, Wikimedia) break often.
  const PD_COLOR = "06AC38"; // PagerDuty brand green
  const logos = [
    { name: "Google Calendar", src: "https://upload.wikimedia.org/wikipedia/commons/a/a5/Google_Calendar_icon_%282020%29.svg" },
    { name: "Outlook",         src: "assets/integrations/outlook.svg" },
    { name: "Apple Calendar",  src: "assets/integrations/apple-calendar.svg" },
    { name: "Zoom",            src: "https://svgl.app/library/zoom.svg" },
    { name: "Slack",           src: "https://svgl.app/library/slack.svg" },
    { name: "SMS",             svg: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
        <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
      </svg>
    ) },
    { name: "PagerDuty",       src: "https://cdn.simpleicons.org/pagerduty/" + PD_COLOR },
    { name: "Google Meet",     src: "https://upload.wikimedia.org/wikipedia/commons/9/9b/Google_Meet_icon_%282020%29.svg" },
    { name: "Microsoft Teams", src: "https://svgl.app/library/microsoft-teams.svg" },
    { name: "HubSpot",         src: "assets/integrations/hubspot.svg" },
    { name: "Salesforce",      src: "https://svgl.app/library/salesforce.svg" },
    { name: "Airtable",        src: "assets/integrations/airtable.svg" },
    { name: "Google Sheets",   src: "assets/integrations/google-sheets.svg" },
  ];

  // Duplicate the set so the keyframe can translateX(-50%) for a seamless loop.
  const renderChips = (keyPrefix) => (
    <>
      {logos.map((l, i) => {
        if (l.pill) {
          return (
            <span key={keyPrefix + "-" + i} className="logo-chip pill-only">
              <span>{l.name}</span>
            </span>
          );
        }
        return (
          <span key={keyPrefix + "-" + i} className="logo-chip">
            {l.src
              ? <img src={l.src} alt={l.name} loading="lazy" />
              : l.svg}
            <span>{l.name}</span>
          </span>
        );
      })}
      <span key={keyPrefix + "-more"} className="logo-chip more">+ More</span>
    </>
  );

  return (
    <section className="marquee-section" aria-label="Integrations">
      <p className="marquee-label">Works with your existing tools</p>
      <div className="marquee">
        <div className="marquee-track">
          {renderChips("a")}
          {renderChips("b")}
        </div>
      </div>
    </section>);

}

// ----------- Stats Bar -----------------------------------------------
function StatsBar() {
  return (
    <section className="stats" id="stats">
      <div className="container">
        <div className="row">
          <div className="stat-card">
            <div className="big">62<span className="unit">%</span></div>
            <div className="copy">of small business calls go unanswered.</div>
          </div>
          <div className="stat-card">
            <div className="big">76<span className="unit">%</span></div>
            <div className="copy">of customers won't leave a voicemail - they'll call your competitor.</div>
          </div>
          <div className="stat-card">
            <div className="big">24<span className="unit">/7</span></div>
            <div className="copy">availability, zero hold time, never a sick day.</div>
          </div>
        </div>
      </div>
    </section>);

}

// ----------- How it works --------------------------------------------
function HowItWorks() {
  const steps = [
  {
    n: "01",
    title: "Keep your number",
    body: "No disruption to your existing setup. We connect your AI receptionist to your current business number in minutes."
  },
  {
    n: "02",
    title: "Live in 24 hours",
    body: "No IT team needed. Your AI is trained on your business, ready to answer, book, and capture leads from day one."
  },
  {
    n: "03",
    title: "Never miss a call again",
    body: "After hours, weekends, public holidays. Every call answered, every lead captured, every appointment booked - automatically."
  }];

  return (
    <section className="section" id="how">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">How it works</div>
          <h2>From your existing line to live in a day.</h2>
          <p className="sub">No new hardware. No porting headaches. No call centre staffing problems.</p>
        </div>
        <div className="steps">
          {steps.map((s) =>
          <div className="step" key={s.n}>
              <div className="num">{s.n}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ----------- Features grid -------------------------------------------
function FeaturesGrid() {
  const items = [
  {
    icon: <IconCalendarCheck />,
    title: "Books appointments",
    body: "Confirms availability live and writes bookings to Google, Outlook, or Calendly before the caller hangs up."
  },
  {
    icon: <IconHelpCircle />,
    title: "Answers FAQs",
    body: "Trained on your hours, location, pricing, and policies - so callers get accurate answers, not hold music."
  },
  {
    icon: <IconPhoneForwarded />,
    title: "Transfers calls",
    body: "Recognises the urgent ones and patches them through to the right person, with full context."
  },
  {
    icon: <IconUserPlus />,
    title: "Captures leads",
    body: "Records every enquiry with name, number, reason, and a clean transcript - straight into your CRM or inbox."
  },
  {
    icon: <IconWaveform />,
    title: "Sounds human",
    body: "Natural cadence, calm tone, and the manners of a great front desk. Most callers won't know it's AI until you tell them."
  },
  {
    icon: <IconGlobe />,
    title: "Multilingual",
    body: "Speaks to callers in the language they're most comfortable with - English, Mandarin, Arabic, Vietnamese, and more."
  },
  {
    icon: <IconLayers />,
    title: "Handles every call at once",
    body: "No hold music. No engaged tone. Every line answered simultaneously, even on your busiest day."
  },
  {
    icon: <IconSliders />,
    title: "Custom voice & personality",
    body: "Pick the voice, set the style, tune the script. AINZ sounds like part of your team because you trained it that way."
  }];

  return (
    <section className="section cream" id="features">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Features</div>
          <h2>One receptionist. Every front-desk job.</h2>
        </div>
        <div className="features-grid">
          {items.map((f) =>
          <div className="feature-card" key={f.title}>
              <div className="icon">{f.icon}</div>
              <h4>{f.title}</h4>
              <p>{f.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ----------- Interactive features (left list + phone) ---------------
function InteractiveFeatures() {
  const features = [
  {
    icon: <IconMessageCircle size={20} />,
    title: "Answers patient enquiries",
    body: "Trained on your hours, location, fees, and services - so every patient gets the right answer, not a voicemail."
  },
  {
    icon: <IconCalendarPlus size={20} />,
    title: "Books appointments",
    body: "Checks your diary live, holds the slot, and writes the booking straight into your practice software before the patient hangs up."
  },
  {
    icon: <IconPhoneForwarded size={20} />,
    title: "Routes urgent calls",
    body: "Recognises the time-sensitive ones and patches them straight through to the right person on call - already briefed on who's calling and why."
  },
  {
    icon: <IconSend size={20} />,
    title: "Sends follow-up summaries",
    body: "Every call ends with a tidy summary and transcript delivered to your inbox, practice management system, or team channel."
  }];


  const [activeIdx, setActiveIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const [isMobile, setIsMobile] = React.useState(false);
  const cycleMs = 7500;

  // Track viewport: ≤768px disables the desktop hover-to-pause interaction.
  React.useEffect(() => {
    if (typeof window === 'undefined' || !window.matchMedia) return;
    const mq = window.matchMedia('(max-width: 768px)');
    const sync = () => setIsMobile(mq.matches);
    sync();
    if (mq.addEventListener) mq.addEventListener('change', sync);
    else mq.addListener(sync);
    return () => {
      if (mq.removeEventListener) mq.removeEventListener('change', sync);
      else mq.removeListener(sync);
    };
  }, []);

  React.useEffect(() => {
    if (paused) return;
    const t = setTimeout(() => setActiveIdx((i) => (i + 1) % features.length), cycleMs);
    return () => clearTimeout(t);
  }, [activeIdx, paused]);

  return (
    <section
      className="section iflex-section"
      id="capabilities"
      onMouseEnter={isMobile ? undefined : () => setPaused(true)}
      onMouseLeave={isMobile ? undefined : () => setPaused(false)}>

      <div className="container">
        <div className="section-head">
          <div className="eyebrow">What it does</div>
          <h2>The whole front desk, in one voice.</h2>
          <p className="sub">Hover a feature to see how AINZ handles each one on a real call.</p>
        </div>

        <div className="iflex">
          <div className="iflex-list">
            {features.map((f, i) => {
              const active = i === activeIdx;
              return (
                <div
                  key={i}
                  className={"iflex-item" + (active ? " is-active" : "") + (active && !paused ? " is-playing" : "")}
                  onClick={() => setActiveIdx(i)}>

                  <span
                    className="progress"
                    style={{ transitionDuration: active && !paused ? cycleMs + "ms" : "0ms" }}>
                  </span>
                  <div className="iflex-ico">{f.icon}</div>
                  <div>
                    <h4>{f.title}</h4>
                    <div className="body-wrap"><div><p>{f.body}</p></div></div>
                  </div>
                </div>);

            })}
          </div>

          <div className="iflex-stage">
            <DevicePhone activeIdx={activeIdx} />
          </div>
        </div>
      </div>
    </section>);

}

// ----------- Device phone with switchable scenes --------------------
function DevicePhone({ activeIdx }) {
  return (
    <div className="device">
      <div className="device-notch"></div>
      <div className="device-screen">
        <div className="device-statusbar">
          <span>9:41</span>
          <span className="right">
            <IconSignal /><IconWifi /><IconBattery />
          </span>
        </div>
        <div className="scene-stack">
          <SceneEnquiry isActive={activeIdx === 0} />
          <SceneBooking isActive={activeIdx === 1} />
          <SceneTransfer isActive={activeIdx === 2} />
          <SceneSummary isActive={activeIdx === 3} />
        </div>
      </div>
    </div>);

}

// ----------- Scene 1: General enquiry chat --------------------------
function SceneEnquiry({ isActive }) {
  return (
    <div className={"scene" + (isActive ? " is-active" : "")}>
      <div className="scene-head">
        <div className="avatar">CK</div>
        <div className="who">
          <span className="name">Claire Kotsiris</span>
          <span className="meta"><span className="live-dot"></span>Live · 0:48</span>
        </div>
        <div className="action"><IconPhoneEnd /></div>
      </div>
      <div className="scene-transcript">
        <div className="scene-bubble them">
          <span className="speaker">Caller</span>
          Hi, are you open Saturdays?
        </div>
        <div className="scene-bubble ai">
          <span className="speaker">AINZ</span>
          We are - open Saturdays 9 to 2 at our Indooroopilly clinic. Standard checkup fees apply.
        </div>
        <div className="scene-bubble them">
          <span className="speaker">Caller</span>
          And are you taking new patients?
        </div>
        <div className="scene-bubble ai">
          <span className="speaker">AINZ</span>
          Yes - we're welcoming new patients. Want me to book you in for a checkup and clean?
        </div>
      </div>
      <div className="scene-footer">
        <span className="pill">Enquiry</span>
        Patient info captured · no human needed.
      </div>
    </div>);

}

// ----------- Scene 2: Booking flow ----------------------------------
function SceneBooking({ isActive }) {
  const slots = [
  { day: 'Mon', time: '10:00', state: 'avail' },
  { day: 'Mon', time: '14:30', state: 'sel' },
  { day: 'Tue', time: '09:00', state: 'avail' },
  { day: 'Tue', time: '11:30', state: 'avail' },
  { day: 'Tue', time: '15:00', state: 'avail' },
  { day: 'Wed', time: '09:30', state: 'dis' },
  { day: 'Wed', time: '13:00', state: 'avail' },
  { day: 'Wed', time: '16:00', state: 'avail' }];

  return (
    <div className={"scene" + (isActive ? " is-active" : "")}>
      <div className="scene-head">
        <div className="avatar">ML</div>
        <div className="who">
          <span className="name">Megan Lawson</span>
          <span className="meta"><span className="live-dot"></span>Booking slot · 1:24</span>
        </div>
        <div className="action"><IconPhoneEnd /></div>
      </div>
      <div className="scene-bubble ai" style={{ alignSelf: 'flex-end', marginBottom: 8 }}>
        <span className="speaker">AINZ</span>
        I have these times open for a checkup and clean this week.
      </div>
      <div className="cal-grid">
        {slots.map((s, i) =>
        <div key={i} className={"cal-cell " + (s.state === 'sel' ? 'is-selected' : s.state === 'dis' ? 'is-disabled' : '')}>
            <span className="day">{s.day}</span>
            {s.time}
          </div>
        )}
      </div>
      <div className="cal-confirm">
        <span className="label">Confirmed</span>
        <span className="slot">Mon 14 May · 2:30 pm</span>
        <span style={{ fontSize: 11, color: 'var(--color-ink-mute)', letterSpacing: '-0.2px' }}>Added to practice diary · SMS sent</span>
      </div>
      <div className="scene-footer">
        <span className="pill">Booked</span>
        Held the slot before the caller hung up.
      </div>
    </div>);

}

// ----------- Scene 3: Urgent transfer -------------------------------
function SceneTransfer({ isActive }) {
  return (
    <div className={"scene" + (isActive ? " is-active" : "")}>
      <div className="scene-head">
        <div className="avatar">CD</div>
        <div className="who">
          <span className="name">Chris Donnelly</span>
          <span className="meta"><span className="live-dot"></span>Urgent · 0:32</span>
        </div>
        <div className="action"><IconPhoneEnd /></div>
      </div>
      <div className="scene-bubble them" style={{ marginBottom: 8 }}>
        <span className="speaker">Caller</span>
        We've got no power to the whole building and a function starting at six - I need someone now.
      </div>
      <div className="scene-bubble ai" style={{ marginBottom: 12 }}>
        <span className="speaker">AINZ</span>
        That can't wait - I'm putting you through to Sam, our on-call manager, right now. Stay on the line.
      </div>

      <div className="transfer-stage">
        <div className="nodes">
          <div className="node"><IconPhoneIncoming size={20} /></div>
          <div className="arrow">
            <IconArrowRight size={16} />
            <div className="dots"><span></span><span></span><span></span></div>
          </div>
          <div className="node active"><IconMic size={22} /></div>
          <div className="arrow">
            <IconArrowRight size={16} />
            <div className="dots"><span></span><span></span><span></span></div>
          </div>
          <div className="node"><IconUsers size={22} /></div>
        </div>
        <div className="labels">
          <span>Caller</span>
          <span style={{ width: 18 }}></span>
          <span>AINZ</span>
          <span style={{ width: 18 }}></span>
          <span>Sam (on-call)</span>
        </div>
        <div className="context">
          <strong>Briefing Sam - SMS</strong>
          Full power outage, function at 6pm. Caller: Chris Donnelly · 0488 220 117. On the line now.
        </div>
      </div>

      <div className="scene-footer">
        <span className="pill" style={{ background: 'rgba(56,189,248,0.16)', color: '#0369a1' }}>Transferred</span>
        Briefed by SMS · Slack · PagerDuty.
      </div>
    </div>);

}

// ----------- Scene 4: Follow-up summary -----------------------------
function SceneSummary({ isActive }) {
  return (
    <div className={"scene" + (isActive ? " is-active" : "")}>
      <div className="scene-head">
        <div className="avatar"><IconCheck size={14} /></div>
        <div className="who">
          <span className="name">Call ended</span>
          <span className="meta">Summary delivered · just now</span>
        </div>
        <div className="action" style={{ background: 'rgba(14,158,142,0.14)', color: 'var(--color-teal)' }}>
          <IconSend />
        </div>
      </div>

      <div className="summary-list">
        <div className="summary-card">
          <div className="head">
            <span className="label">Inbox · reception@riversidedental.com.au</span>
            <span className="channel">Email</span>
          </div>
          <div className="body">
            <div className="row"><span className="k">Caller</span><span className="v">Priya Nair</span></div>
            <div className="row"><span className="k">Number</span><span className="v">+61 451 776 094</span></div>
            <div className="row"><span className="k">Reason</span><span className="v">New patient enquiry</span></div>
            <div className="row"><span className="k">Length</span><span className="v">3:21</span></div>
          </div>
          <div className="summary-text">
            "New patient enquiry - wants a checkup and clean, plus a whitening consult. Has HCF private health. Prefers Saturday morning. Best to call back after 5pm weekdays."
          </div>
        </div>

        <div className="summary-card">
          <div className="head">
            <span className="label">#bookings · Slack</span>
            <span className="channel">Slack</span>
          </div>
          <div className="body" style={{ paddingBottom: 12 }}>
            <div className="row"><span className="k">Booked</span><span className="v">Megan Lawson - Mon 2:30 pm</span></div>
            <div className="row"><span className="k">Job</span><span className="v">Checkup &amp; clean · Indooroopilly clinic</span></div>
          </div>
        </div>
      </div>

      <div className="scene-footer" style={{ marginTop: 10 }}>
        <span className="pill">Sent</span>
        Synced to your practice management system and team channel.
      </div>
    </div>);

}

// ----------- Pricing -------------------------------------------------
function PricingSection() {
  const tiers = [
  {
    name: "Starter", price: "$249", per: "/mo",
    desc: "For solo operators and small teams getting started.",
    specs: [
    { label: "Included calls", val: "100 calls" },
    { type: "note", text: "Additional calls billed at $1.50 each" },
    { label: "Concurrent calls", val: "2" }],

    cta: "Get started",
    featured: false,
    tag: null
  },
  {
    name: "Pro", price: "$449", per: "/mo",
    desc: "Our most popular plan - for growing businesses with steady call volume.",
    specs: [
    { label: "Included calls", val: "250 calls" },
    { type: "note", text: "Additional calls billed at $1.50 each" },
    { label: "Concurrent calls", val: "10" },
    { label: "AI call summaries", check: true },
    { label: "CRM integration", check: true }],

    cta: "Get started",
    featured: true,
    tag: "Most popular"
  },
  {
    name: "Enterprise", price: "$799", per: "/mo",
    desc: "For high-volume teams that need unlimited call handling.",
    specs: [
    { label: "Included calls", val: "Unlimited" },
    { label: "Concurrent calls", val: "Unlimited" },
    { label: "AI call summaries", check: true },
    { label: "CRM integration", check: true },
    { label: "Custom AI persona", check: true }],

    cta: "Get started",
    featured: false,
    tag: null
  }];


  return (
    <section className="section cream" id="pricing">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Pricing</div>
          <h2>Simple pricing. Every call answered.</h2>
          <p className="sub">All plans in AUD. Includes call handling, bookings, lead capture, and integrations.</p>
        </div>
        <div className="pricing">
          {tiers.map((t) =>
          <div key={t.name} className={"tier pricing-tier " + (t.featured ? "featured" : "")}>
              {t.tag && <span className="tier-tag">{t.tag}</span>}
              <h3>{t.name}</h3>
              <div className="price-block">
                <span className="amount">{t.price}</span>
                <span className="per">{t.per}</span>
              </div>
              <div className="desc">{t.desc}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
                {t.specs.map((s) => {
                if (s.type === "note") {
                  return <p className="spec-note" key={s.text}>{s.text}</p>;
                }
                return (
              <div className="spec-row" key={s.label}>
                    <span className="label">{s.label}</span>
                    {s.check ?
                <span className="val spec-check" aria-hidden="true">✓</span> :
                <span className="val">{s.val}</span>}
                  </div>
                );
              })}
              </div>
              <div className="cta">
                <a href="https://cal.com/ainz-ai/ainz-discovery-call" target="_blank" rel="noopener noreferrer" className={"btn " + (t.featured ? "" : "btn-primary")}>
                  {t.cta} <IconArrowRight size={14} />
                </a>
              </div>
            </div>
          )}
        </div>
        <p className="pricing-foot">All plans include a 2-week free trial. Cancel any time.</p>
      </div>
    </section>);

}

// ----------- Testimonials --------------------------------------------
function Testimonials() {
  const items = [
  {
    quote: "We were missing calls every time we were on the tools. Within a week we'd booked 11 new jobs through the AI alone.",
    name: "Jake R.",
    role: "Owner - Hamilton Heating and Cooling, Brisbane",
    initials: "JR",
    photo: "assets/testimonials/jake.png"
  },
  {
    quote: "Our front desk was overwhelmed with appointment calls. The AI handles 80% of them now without us lifting a finger.",
    name: "Sarah M.",
    role: "Practice Manager - Horsfall Optometrists, Melbourne",
    initials: "SM",
    photo: "assets/testimonials/sarah.png"
  },
  {
    quote: "I was sceptical but the setup was dead simple. Customers can't tell the difference and we haven't missed a lead since.",
    name: "Tara H.",
    role: "Director - Kiru Barbershop, Sydney",
    initials: "TH",
    photo: "assets/testimonials/tara.png"
  }];

  return (
    <section className="section testimonials" id="customers">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Customers</div>
          <h2>Trusted by businesses across Australia.</h2>
        </div>
        <div className="tcards">
          {items.map((t) =>
          <div className="tcard" key={t.name}>
              <p className="quote">{t.quote}</p>
              <div className="attrib">
                <div className="avatar">
                  {t.photo
                    ? <img src={t.photo} alt={t.name} loading="lazy" />
                    : t.initials}
                </div>
                <div className="who">
                  <span className="name">{t.name}</span>
                  <span className="role">{t.role}</span>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ----------- Final CTA -----------------------------------------------
function FinalCTA() {
  return (
    <section className="final-cta" id="demo">
      <div className="container inner">
        <h2>Never miss another call.</h2>
        <div className="ctas">
          <a href="tel:+61370504411" className="btn btn-primary">
            <IconPhone size={16} /> Hear it in action
          </a>
          <a href="https://cal.com/ainz-ai/ainz-discovery-call" target="_blank" rel="noopener noreferrer" className="btn btn-secondary">Book a demo</a>
        </div>
        <div className="supporting">2-week free trial. Cancel any time.</div>
      </div>
    </section>);

}

// ----------- FAQ (home) ----------------------------------------------
function HomeFAQ() {
  const faqs = [
  {
    q: "Will callers know they're speaking to AI?",
    a: "That's your call - and we help you make it. Some businesses want AINZ to introduce itself plainly as an AI; others want it to sound as natural as a great front-desk receptionist and only disclose if asked. We sit with you through onboarding to write the opening line and personality, then iterate on real test calls until it sounds right. Nothing goes live until you've signed it off."
  },
  {
    q: "What happens if AINZ can't answer a question?",
    a: "It doesn't make things up. If a caller asks something outside the knowledge you've given it, AINZ takes one of three paths - take a message, book a callback, or transfer to a human with an SMS briefing - based on rules you set. Every unanswered question is logged so you can train the next answer in."
  },
  {
    q: "How does setup work, and how long does it take?",
    a: "Most businesses are live within 24 to 48 hours. A 30-minute discovery call, configuration on our side, then live test calls together - we iterate on the script with you until it's right, then point your number at AINZ. No new hardware, no porting, no app to install."
  },
  {
    q: "Does it work with my existing phone number?",
    a: "Yes. Your number stays where it is - we connect AINZ via a standard call-forward or virtual-line setup with your existing carrier. You choose when AINZ picks up: overflow only, after-hours only, or every call from the first ring."
  },
  {
    q: "Is my data secure? Where is it stored?",
    a: "Account data, transcripts, and call recordings are hosted in Australia (AWS Sydney), encrypted in transit (TLS 1.2+) and at rest (AES-256). Some real-time processing happens in disclosed offshore regions operated by our model providers. We don't sell your data and we don't use your callers' conversations to train models outside your account. Full picture on our Privacy page."
  },
  {
    q: "How do I cancel?",
    a: "One click in your account, or an email to support. No lock-in, no exit fee. The 2-week trial costs nothing and ends automatically. After the trial, cancellation takes effect at the end of your current billing month - AINZ keeps answering until your paid period runs out."
  }];


  const [openIdx, setOpenIdx] = React.useState(0);

  return (
    <section className="home-faq" id="faq">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">FAQ</div>
          <h2>Common questions.</h2>
          <p className="sub">The full list lives on the <a href="faq.html">FAQ page</a>. Anything we haven't covered - email <a href="mailto:hello@ainz.com.au">hello@ainz.com.au</a>.</p>
        </div>
        <div className="home-faq-list">
          {faqs.map((item, i) => {
            const open = i === openIdx;
            return (
              <div className="home-faq-item" key={i}>
                <button
                  type="button"
                  className="home-faq-q"
                  aria-expanded={open}
                  aria-controls={"home-faq-a-" + i}
                  onClick={() => setOpenIdx(open ? -1 : i)}>
                  <span>{item.q}</span>
                  <span className="home-faq-chev" aria-hidden="true">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
                  </span>
                </button>
                <div id={"home-faq-a-" + i} className={"home-faq-a-wrap" + (open ? " open" : "")}>
                  <div className="home-faq-a">
                    <p>{item.a}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>);

}

// ----------- Footer --------------------------------------------------
function SiteFooter() {
  const base = (typeof window !== 'undefined' && /\/blog\//.test(window.location.pathname)) ? '../' : '';
  const cols = [
  { h: "Product", links: [
    { label: "How it works", href: base + "how-it-works.html" },
    { label: "Features", href: base + "features.html" },
    { label: "Pricing", href: base + "pricing.html" },
    { label: "Integrations", href: "#" },
    { label: "Voice library", href: base + "voice-library.html" }
  ] },
  { h: "Resources", links: [
    { label: "Blog", href: base + "blog/index.html" },
    { label: "FAQ", href: base + "faq.html" },
    { label: "About", href: base + "about.html" },
    { label: "Docs", href: "#" },
    { label: "Support", href: "#" },
    { label: "Privacy", href: base + "privacy.html" },
    { label: "Terms", href: base + "terms.html" }
  ] }];

  return (
    <footer>
      <div className="container">
        <div className="grid">
          <div>
            <div className="nav-logo" style={{ marginBottom: 16 }} aria-label="AINZ">
              <span className="mark" aria-hidden="true"></span>Ainz
            </div>
            <p style={{ fontSize: 13, color: 'var(--color-ink-mute)', maxWidth: 260, lineHeight: 1.55, fontWeight: 300 }}>
              The AI receptionist for Australian businesses. Answers every call, books every appointment, captures every lead.
            </p>
          </div>
          {cols.map((c) =>
          <div key={c.h}>
              <h4>{c.h}</h4>
              <ul>{c.links.map((l) => <li key={l.label}><a href={l.href}>{l.label}</a></li>)}</ul>
            </div>
          )}
        </div>
        <div className="legal">
          <span>© 2026 AINZ Pty Ltd. Made in Australia.</span>
          <a href={base + "privacy.html"}>Privacy</a>
          <a href={base + "terms.html"}>Terms</a>
          <a href="#">Security</a>
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  SiteNav, HeroBlock, HeroCallCard, LogoMarquee, StatsBar, HowItWorks, FeaturesGrid,
  InteractiveFeatures, DevicePhone, SceneEnquiry, SceneBooking, SceneTransfer, SceneSummary, PricingSection, Testimonials, HomeFAQ, FinalCTA, SiteFooter
});