// Heed — Interactive demo: patient review flow + clinic dashboard view
const { useState, useEffect, useRef } = React;

// ---------- Patient flow ----------
function StarRow({ value, hover, onSet, onHover, size = 36 }) {
  const stars = [1, 2, 3, 4, 5];
  return (
    <div
      role="radiogroup"
      aria-label="Star rating"
      style={{ display: 'flex', gap: 6 }}
      onMouseLeave={() => onHover && onHover(0)}>
      
      {stars.map((n) => {
        const filled = (hover || value) >= n;
        return (
          <button
            key={n}
            role="radio"
            aria-checked={value === n}
            aria-label={`${n} star${n > 1 ? 's' : ''}`}
            onMouseEnter={() => onHover && onHover(n)}
            onClick={() => onSet(n)}
            style={{
              background: 'transparent',
              border: 0,
              padding: 4,
              cursor: 'pointer',
              transition: 'transform 120ms ease',
              transform: filled ? 'scale(1.04)' : 'scale(1)'
            }}>
            
            <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
              <path
                d="M12 3.5l2.7 5.5 6.1.9-4.4 4.3 1 6.1L12 17.5l-5.4 2.8 1-6.1L3.2 9.9l6.1-.9L12 3.5z"
                fill={filled ? '#b8860b' : 'none'}
                stroke={filled ? '#b8860b' : '#d4d4d0'}
                strokeWidth="1.4"
                strokeLinejoin="round" />
              
            </svg>
          </button>);

      })}
    </div>);

}

function SmsScreen({ onTapStar }) {
  const [hover, setHover] = useState(0);
  return (
    <div className="demo-screen rise" key="sms">
      <div className="demo-eyebrow caption">SMS · Today, 2:14 PM</div>
      <div className="sms-bubble">
        <div className="sms-from">Sundance Dental</div>
        <div className="sms-text">
          Hi Sarah, thanks for visiting today. How was your appointment with Dr. Chen?
        </div>
        <div style={{ marginTop: 20 }}>
          <div className="tap-hint" aria-hidden="true">
            <span>Tap a star</span>
            <svg width="12" height="12" viewBox="0 0 14 14" fill="none">
              <path d="M7 2 L7 11 M3.5 7.5 L7 11 L10.5 7.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
          <StarRow value={0} hover={hover} onSet={onTapStar} onHover={setHover} />
        </div>
        <div className="sms-meta">Tap a star to reply · Powered by Heed</div>
      </div>
    </div>);

}

function PrivateFeedbackScreen({ rating, onSubmit, onBack }) {
  const [reason, setReason] = useState('');
  const [details, setDetails] = useState('');
  const reasons = ['Wait time', 'Front desk', 'Treatment', 'Billing', 'Something else'];

  return (
    <div className="demo-screen rise" key="feedback">
      <button className="back-link" onClick={onBack} aria-label="Back">← Back</button>
      <div style={{ marginTop: 8 }}>
        <div className="caption" style={{ color: 'var(--text-muted)' }}>YOUR FEEDBACK · PRIVATE</div>
        <h3 className="h2" style={{ marginTop: 8, marginBottom: 8, fontSize: 22, color: "rgb(26, 26, 26)" }}>
          Sorry to hear that. What happened?
        </h3>
        <p className="body-sm" style={{ margin: 0, color: 'var(--text-secondary)' }}>
          This goes straight to the clinic, not online. The team reads every note that comes in.
        </p>
      </div>

      <div style={{ marginTop: 20 }}>
        <div className="caption" style={{ marginBottom: 8 }}>WHAT WAS THE ISSUE?</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {reasons.map((r) =>
          <button
            key={r}
            onClick={() => setReason(r)}
            className={`chip ${reason === r ? 'chip-on' : ''}`}>
            
              {r}
            </button>
          )}
        </div>
      </div>

      <div style={{ marginTop: 16 }}>
        <textarea
          value={details}
          onChange={(e) => setDetails(e.target.value)}
          placeholder="A few words on what could have gone better…"
          className="ta"
          rows={3} />
        
      </div>

      <div style={{ marginTop: 16, display: 'flex', justifyContent: 'flex-end' }}>
        <button
          className="btn btn-primary"
          onClick={() => onSubmit({ reason, details })}
          disabled={!reason}
          style={{ opacity: reason ? 1 : 0.5 }}>
          
          Send privately
        </button>
      </div>
    </div>);

}

function GoogleRouteScreen({ onBack, onPosted }) {
  const [copied, setCopied] = useState(false);
  const [posting, setPosting] = useState(false);
  const post = () => {
    setPosting(true);
    setTimeout(() => onPosted && onPosted(), 700);
  };
  return (
    <div className="demo-screen rise" key="google">
      <button className="back-link" onClick={onBack} aria-label="Back">← Back</button>
      <div style={{ marginTop: 8 }}>
        <div className="caption">THANKS, SARAH</div>
        <h3 className="h2" style={{ marginTop: 8, marginBottom: 8, fontSize: 22, color: "rgb(26, 26, 26)" }}>
          Would you share that on Google?
        </h3>
        <p className="body-sm" style={{ margin: 0, color: 'var(--text-secondary)' }}>
          Reviews help other patients find us. We've drafted yours below. Edit anything.
        </p>
      </div>

      <div className="g-card">
        <div className="g-card-head">
          <div className="g-avatar">S</div>
          <div>
            <div style={{ fontWeight: 600, fontSize: 14 }}>Sarah M.</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 2 }}>
              <div className="stars">
                {[1, 2, 3, 4, 5].map((n) =>
                <svg key={n} width="14" height="14" viewBox="0 0 24 24">
                    <path d="M12 3.5l2.7 5.5 6.1.9-4.4 4.3 1 6.1L12 17.5l-5.4 2.8 1-6.1L3.2 9.9l6.1-.9L12 3.5z"
                  fill="#b8860b" stroke="#b8860b" strokeWidth="1.4" strokeLinejoin="round" />
                  </svg>
                )}
              </div>
              <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>just now</span>
            </div>
          </div>
        </div>
        <div className="g-card-body">
          Dr. Chen took the time to actually listen. Clean office, no pressure, and the front desk made rebooking painless. Genuinely the best dental visit I've had in years.
        </div>
      </div>

      <div style={{ marginTop: 16, display: 'flex', gap: 8, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
        <button className="btn btn-secondary" onClick={() => {setCopied(true);setTimeout(() => setCopied(false), 1400);}}>
          {copied ? 'Copied' : 'Copy & edit'}
        </button>
        <button className="btn btn-primary" onClick={post} disabled={posting} style={{ opacity: posting ? 0.7 : 1 }}>
          {posting ? 'Posting…' : 'Post to Google'}
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M7 17L17 7M17 7H8M17 7v9" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>
      </div>
    </div>);

}

function PatientFlow() {
  const [step, setStep] = useState('sms'); // sms | feedback | google | sent | posted
  const [rating, setRating] = useState(0);

  const tap = (n) => {
    setRating(n);
    setStep(n <= 3 ? 'feedback' : 'google');
  };

  const reset = () => {setRating(0);setStep('sms');};

  return (
    <div className="patient-stage">
      <div className="trail">
        <span className={`trail-dot ${step === 'sms' ? 'on' : ''}`} />
        <span className="trail-line" />
        <span className={`trail-dot ${step === 'feedback' || step === 'google' || step === 'sent' || step === 'posted' ? 'on' : ''}`} />
        <span className="trail-line" />
        <span className={`trail-dot ${step === 'sent' || step === 'posted' ? 'on' : ''}`} />
      </div>

      <div className="screen-frame">
        {step === 'sms' && <SmsScreen onTapStar={tap} />}
        {step === 'feedback' &&
        <PrivateFeedbackScreen rating={rating} onBack={reset} onSubmit={() => setStep('sent')} />
        }
        {step === 'google' && <GoogleRouteScreen onBack={reset} onPosted={() => setStep('posted')} />}
        {step === 'posted' &&
        <div className="demo-screen rise" key="posted">
            <div className="caption" style={{ color: 'var(--success)' }}>POSTED TO GOOGLE</div>
            <h3 className="h2" style={{ marginTop: 8, marginBottom: 8, fontSize: 22 }}>
              Thanks for the kind words.
            </h3>
            <p className="body-sm" style={{ margin: 0, color: 'var(--text-secondary)' }}>
              Sarah's 5-star review is live on the clinic's Google profile. The team gets a heads-up in their daily digest.
            </p>
            <div className="g-card" style={{ marginTop: 18 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                    <path d="M21.8 12.2c0-.7-.1-1.4-.2-2H12v3.8h5.5c-.2 1.2-1 2.3-2 3v2.5h3.3c1.9-1.8 3-4.4 3-7.3z" fill="#4285F4" />
                    <path d="M12 22c2.7 0 5-1 6.7-2.5l-3.3-2.5c-.9.6-2 1-3.4 1-2.6 0-4.8-1.7-5.6-4.1H3v2.6C4.7 19.9 8.1 22 12 22z" fill="#34A853" />
                    <path d="M6.4 13.9c-.2-.6-.3-1.2-.3-1.9s.1-1.3.3-1.9V7.5H3C2.4 8.9 2 10.4 2 12s.4 3.1 1 4.5l3.4-2.6z" fill="#FBBC05" />
                    <path d="M12 6c1.5 0 2.8.5 3.8 1.5l2.9-2.9C17 3 14.7 2 12 2 8.1 2 4.7 4.1 3 7.5l3.4 2.6C7.2 7.7 9.4 6 12 6z" fill="#EA4335" />
                  </svg>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>Sundance Dental</div>
                    <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>Live on Google · just now</div>
                  </div>
                </div>
                <span className="tag tag-intercepted" style={{ background: 'var(--accent-tint)', color: 'var(--accent-dark)' }}>+1 review</span>
              </div>
            </div>
            <button className="btn btn-secondary" onClick={reset} style={{ marginTop: 20, alignSelf: 'flex-start' }}>
              Restart demo
            </button>
          </div>
        }
        {step === 'sent' &&
        <div className="demo-screen rise" key="sent">
            <div className="caption" style={{ color: 'var(--success)' }}>GOT IT, THANKS</div>
            <h3 className="h2" style={{ marginTop: 8, marginBottom: 8, fontSize: 22 }}>
              We hear you, Sarah.
            </h3>
            <p className="body-sm" style={{ margin: 0, color: 'var(--text-secondary)' }}>
              Your note went straight to our team at Sundance Dental. We read every one, and we'll do our best to make things right next time you're in.
            </p>
            <button className="btn btn-secondary" onClick={reset} style={{ marginTop: 20 }}>
              Restart demo
            </button>
          </div>
        }
      </div>

      <div className="caption side-note">
        {step === 'sms' && 'Try tapping 2 stars vs. 5 stars. Heed routes them differently.'}
        {step === 'feedback' && '1–3 stars never reach Google. They reach the clinic.'}
        {step === 'google' && '4–5 stars get a one-tap path to a real Google review.'}
        {step === 'sent' && 'No public review. The clinic gets a chance to make it right.'}
      </div>
    </div>);

}

// ---------- Clinic view ----------
const inbox = [
{ id: 1, name: 'Sarah M.', stars: 2, reason: 'Wait time', when: '14m ago', preview: 'Waited 40 minutes past my appointment. No one explained why.', status: 'new', intercepted: true },
{ id: 2, name: 'Marcus T.', stars: 5, reason: null, when: '1h ago', preview: 'Posted to Google →', status: 'posted', intercepted: false },
{ id: 3, name: 'Priya K.', stars: 3, reason: 'Billing', when: '3h ago', preview: 'Insurance question. Was billed for something I thought was covered.', status: 'in-progress', intercepted: true },
{ id: 4, name: 'Daniel R.', stars: 5, reason: null, when: '5h ago', preview: 'Posted to Google →', status: 'posted', intercepted: false },
{ id: 5, name: 'Anonymous', stars: 1, reason: 'Front desk', when: 'Yesterday', preview: 'Felt rushed. The receptionist seemed stressed.', status: 'resolved', intercepted: true },
{ id: 6, name: 'Lena F.', stars: 4, reason: null, when: 'Yesterday', preview: 'Posted to Google →', status: 'posted', intercepted: false }];


function ClinicView() {
  const [selected, setSelected] = useState(1);
  const item = inbox.find((i) => i.id === selected) || inbox[0];

  return (
    <div className="clinic-stage">
      <aside className="clinic-side">
        <div className="clinic-side-head">
          <div className="caption">INBOX</div>
          <div className="caption tabular" style={{ color: 'var(--accent)' }}>
            3 routed privately this week
          </div>
        </div>
        <div className="clinic-list">
          {inbox.map((row) =>
          <button
            key={row.id}
            onClick={() => setSelected(row.id)}
            className={`clinic-row ${selected === row.id ? 'on' : ''}`}>
            
              <div className="clinic-row-head">
                <span style={{ fontWeight: 600, fontSize: 14 }}>{row.name}</span>
                <span style={{ fontSize: 12, color: 'var(--text-muted)' }} className="tabular">{row.when}</span>
              </div>
              <div className="clinic-row-meta">
                <span className="stars">
                  {[1, 2, 3, 4, 5].map((n) => {
                  const f = row.stars >= n;
                  return (
                    <svg key={n} width="11" height="11" viewBox="0 0 24 24">
                        <path d="M12 3.5l2.7 5.5 6.1.9-4.4 4.3 1 6.1L12 17.5l-5.4 2.8 1-6.1L3.2 9.9l6.1-.9L12 3.5z"
                      fill={f ? '#b8860b' : 'none'}
                      stroke={f ? '#b8860b' : '#d4d4d0'}
                      strokeWidth="1.4" strokeLinejoin="round" />
                      </svg>);

                })}
                </span>
                {row.intercepted && <span className="tag tag-intercepted">Routed Privately</span>}
                {!row.intercepted && <span className="tag tag-posted">Posted</span>}
              </div>
              <div className="clinic-row-preview">{row.preview}</div>
            </button>
          )}
        </div>
      </aside>

      <main className="clinic-main">
        <div className="clinic-main-head">
          <div>
            <div className="caption" style={{ color: item.intercepted ? 'var(--accent)' : 'var(--text-muted)' }}>
              {item.intercepted ? 'ROUTED PRIVATELY · NOT PUBLIC' : 'PUBLIC · GOOGLE'}
            </div>
            <h3 style={{ margin: '6px 0 0', fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em', color: "rgb(26, 26, 26)" }}>
              {item.name}
            </h3>
          </div>
          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
            <span className="stars">
              {[1, 2, 3, 4, 5].map((n) => {
                const f = item.stars >= n;
                return (
                  <svg key={n} width="16" height="16" viewBox="0 0 24 24">
                    <path d="M12 3.5l2.7 5.5 6.1.9-4.4 4.3 1 6.1L12 17.5l-5.4 2.8 1-6.1L3.2 9.9l6.1-.9L12 3.5z"
                    fill={f ? '#b8860b' : 'none'}
                    stroke={f ? '#b8860b' : '#d4d4d0'}
                    strokeWidth="1.4" strokeLinejoin="round" />
                  </svg>);

              })}
            </span>
            <span className="tabular" style={{ fontSize: 13, color: 'var(--text-muted)', marginLeft: 4 }}>{item.when}</span>
          </div>
        </div>

        {item.intercepted ?
        <>
            <div className="clinic-meta-row">
              <div className="meta-cell">
                <div className="caption">REASON</div>
                <div style={{ fontSize: 14, fontWeight: 500, marginTop: 4, color: "rgb(26, 26, 26)" }}>{item.reason}</div>
              </div>
              <div className="meta-cell">
                <div className="caption">ASSIGNED TO</div>
                <div style={{ fontSize: 14, fontWeight: 500, marginTop: 4, color: "rgb(26, 26, 26)" }}>Dr. Chen</div>
              </div>
              <div className="meta-cell">
                <div className="caption">STATUS</div>
                <div style={{ fontSize: 14, fontWeight: 500, marginTop: 4, textTransform: 'capitalize', color: "rgb(26, 26, 26)" }}>{item.status.replace('-', ' ')}</div>
              </div>
            </div>

            <div className="clinic-quote">
              <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: 'var(--text-primary)' }}>
                "{item.preview}"
              </p>
            </div>

            <div className="caption" style={{ marginTop: 24 }}>SUGGESTED REPLY</div>
            <div className="clinic-reply">
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: 'var(--text-secondary)' }}>
                Hi {item.name.split(' ')[0]}, I'm so sorry about the wait today. That's not the experience we want to give you. Could I call you tomorrow morning to talk through it and make it right?
              </p>
              <div style={{ display: 'flex', gap: 8, marginTop: 16, justifyContent: 'flex-end' }}>
                <button className="btn btn-secondary">Edit</button>
                <button className="btn btn-primary">Send reply</button>
              </div>
            </div>
          </> :

        <div className="clinic-quote">
            <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: "rgb(26, 26, 26)" }}>
              {item.name} routed straight to Google with a 5-star review. No action needed.
            </p>
          </div>
        }
      </main>
    </div>);

}

// ---------- Demo wrapper ----------
function Demo() {
  const [view, setView] = useState('patient');
  return (
    <div className="demo">
      <div className="demo-toolbar">
        <div className="demo-tabs" role="tablist">
          <button
            role="tab"
            aria-selected={view === 'patient'}
            className={`demo-tab ${view === 'patient' ? 'on' : ''}`}
            onClick={() => setView('patient')}>
            
            Patient view
          </button>
          <button
            role="tab"
            aria-selected={view === 'clinic'}
            className={`demo-tab ${view === 'clinic' ? 'on' : ''}`}
            onClick={() => setView('clinic')}>
            
            Clinic view
          </button>
        </div>
        <div className="demo-status">
          <span className="dot-live" />
          <span className="caption" style={{ color: 'var(--text-muted)' }}>Live prototype</span>
        </div>
      </div>
      <div className="demo-body">
        {view === 'patient' ? <PatientFlow /> : <ClinicView />}
      </div>
    </div>);

}

window.Demo = Demo;