// Hero section — headline, CTAs, and a floating patient-view phone mockup with
// orbital decorative chips. The dedicated scroll-driven invoice→Hinata morph
// lives in a later section (Problem / Transform).

const HeroPhone = () => {
  // Subtle animated highlight that scans the phone preview
  return (
    <div className="phone" style={{ animation: 'float-y 6s ease-in-out infinite' }}>
      <div className="phone-notch"></div>
      <div className="phone-screen">
        {/* Branded header */}
        <div style={{
          background: 'linear-gradient(180deg, #FBF6EC 0%, #F6EEDC 100%)',
          padding: '46px 18px 18px',
          borderBottom: '1px solid rgba(0,0,0,0.05)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{
              width: 38, height: 38, borderRadius: 10,
              background: '#1A1A1A', color: '#E6CC8A',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'Noto Sans JP', fontWeight: 600, fontSize: 18,
            }}>R</div>
            <div style={{ lineHeight: 1.2 }}>
              <div style={{ fontWeight: 600, fontSize: 13, color: '#1A1A1A' }}>Riverside Oral Surgery</div>
              <div style={{ fontSize: 11, color: '#8A8170' }}>Dr. Mira Halevy, DDS</div>
            </div>
          </div>
          <div style={{ marginTop: 14, fontSize: 11, color: '#8A8170', fontFamily: 'Geist Mono' }}>
            TREATMENT PLAN · #TP-4821
          </div>
          <div style={{ marginTop: 4, fontWeight: 500, fontSize: 17, color: '#1A1A1A', letterSpacing: '-0.01em' }}>
            For Marcus Chen
          </div>
        </div>

        {/* Procedure animation slot */}
        <div className="pv-section" style={{ paddingTop: 14, paddingBottom: 14 }}>
          <h5>YOUR PROCEDURE</h5>
          <div style={{ fontWeight: 500, fontSize: 14, marginBottom: 8, color: '#1A1A1A' }}>
            Dental implant · tooth #14
          </div>
          <div style={{
            height: 130,
            borderRadius: 10,
            background: 'radial-gradient(circle at 30% 30%, #F2E7D0 0%, #E6D2A8 100%)',
            position: 'relative',
            overflow: 'hidden',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}>
            {/* Stylized tooth + implant illustration */}
            <svg viewBox="0 0 200 130" width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
              {/* Gum line */}
              <path d="M0 75 Q50 70, 100 73 T200 75 L200 130 L0 130 Z" fill="#E8B89C" opacity="0.55" />
              {/* Bone shading */}
              <path d="M0 92 Q50 88, 100 90 T200 92 L200 130 L0 130 Z" fill="#C99B6A" opacity="0.5" />
              {/* Implant post */}
              <g>
                <rect x="92" y="62" width="16" height="48" rx="2" fill="#7A7A7A" />
                <rect x="92" y="66" width="16" height="2" fill="rgba(0,0,0,0.2)" />
                <rect x="92" y="72" width="16" height="2" fill="rgba(0,0,0,0.2)" />
                <rect x="92" y="78" width="16" height="2" fill="rgba(0,0,0,0.2)" />
                <rect x="92" y="84" width="16" height="2" fill="rgba(0,0,0,0.2)" />
                <rect x="92" y="90" width="16" height="2" fill="rgba(0,0,0,0.2)" />
              </g>
              {/* Crown */}
              <path d="M86 62 L88 50 Q92 42 100 42 Q108 42 112 50 L114 62 Z" fill="#FAFAFA" stroke="rgba(0,0,0,0.1)" />
              <ellipse cx="100" cy="46" rx="4" ry="2" fill="rgba(255,255,255,0.6)" />
              {/* Floating play */}
              <circle cx="160" cy="20" r="13" fill="rgba(255,255,255,0.9)" />
              <path d="M157 14 L165 20 L157 26 Z" fill="#1A1A1A" />
            </svg>
            <div style={{ position: 'absolute', bottom: 8, left: 10, fontSize: 10, fontFamily: 'Geist Mono', color: 'rgba(0,0,0,0.55)' }}>
              3D · 0:42
            </div>
          </div>
        </div>

        <div className="pv-section">
          <h5>WHAT IT IS</h5>
          <p style={{ fontSize: 13, lineHeight: 1.5, color: '#3a3a3a', margin: 0 }}>
            A titanium post is gently placed into your jawbone where the missing
            tooth used to be. Over a few months, your bone fuses to it — making it
            as strong as a real root.
          </p>
        </div>

        <div className="pv-section">
          <h5>WHAT TO EXPECT</h5>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              { t: 'Day of', d: '60–90 min · light sedation' },
              { t: '3 days', d: 'Mild swelling fades' },
              { t: '3 months', d: 'Bone integrates fully' },
            ].map((s, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{
                  width: 6, height: 6, borderRadius: '50%',
                  background: i === 0 ? '#B8924A' : i === 1 ? '#D4B47A' : '#E6CC8A',
                }}></div>
                <div style={{ flex: 1, display: 'flex', justifyContent: 'space-between', fontSize: 12 }}>
                  <span style={{ fontWeight: 500, color: '#1A1A1A' }}>{s.t}</span>
                  <span style={{ color: '#8A8170' }}>{s.d}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

const Hero = () => {
  return (
    <section id="top" style={{ paddingTop: 'calc(var(--sec-py) - 32px)', paddingBottom: 'var(--sec-py)', position: 'relative' }}>
      <div className="sun-glow" style={{ top: '-200px', right: '-200px' }}></div>
      <div className="sun-glow" style={{ bottom: '-300px', left: '-300px', opacity: 0.35 }}></div>

      <div className="container" style={{ position: 'relative' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 0.9fr)',
          gap: 80,
          alignItems: 'center',
        }}>
          {/* Left — copy */}
          <div className="reveal in">
            <div className="chip" style={{ marginBottom: 28 }}>
              <span className="chip-dot"></span>
              Now in private beta · Canadian dental specialists
            </div>

            <h1 style={{ marginBottom: 24 }}>
              Treatment plans that feel <span className="serif" style={{ color: 'var(--gold-deep)' }}>nothing&nbsp;like</span> an invoice.
            </h1>

            <p className="lede" style={{ marginBottom: 36 }}>
              Hinata turns a complex specialist treatment plan into a beautiful,
              mobile-friendly explanation your patient actually wants to read —
              with procedure animations, plain language, and a single link to share.
            </p>

            <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 28, flexWrap: 'wrap' }}>
              <a className="btn btn-primary btn-lg" href="#trial">
                Start free trial <Icon name="arrow-right" size={15} />
              </a>
              <a className="btn btn-secondary btn-lg" href="#patient">
                See a patient view <Icon name="arrow-up-right" size={14} />
              </a>
            </div>

            <div style={{ display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap', color: 'var(--fg-faint)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
                <Icon name="check" size={14} /> No PMS integration required
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
                <Icon name="check" size={14} /> Two-minute setup
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
                <Icon name="check" size={14} /> Fully white-labeled
              </div>
            </div>
          </div>

          {/* Right — phone + orbital chips */}
          <div className="reveal in" style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
            {/* Decorative dotted ring */}
            <div style={{
              position: 'absolute',
              width: 520, height: 520, borderRadius: '50%',
              border: '1px dashed var(--line-strong)',
              top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
              animation: 'rotate-slow 90s linear infinite',
            }}></div>

            <HeroPhone />

            {/* Floating chip: AI generated — sits above-left, outside phone */}
            <div className="card" style={{
              position: 'absolute', top: -8, left: -80,
              padding: '10px 14px', borderRadius: 12,
              display: 'flex', alignItems: 'center', gap: 10,
              boxShadow: 'var(--shadow-md)',
              animation: 'float-y 5s ease-in-out infinite',
              background: 'var(--card-solid)',
              whiteSpace: 'nowrap',
              zIndex: 3,
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: 8,
                background: 'var(--gold)', display: 'flex',
                alignItems: 'center', justifyContent: 'center',
                color: '#1A1A1A',
              }}>
                <Icon name="sparkle" size={14} />
              </div>
              <div>
                <div style={{ fontSize: 12, fontWeight: 600 }}>AI-generated</div>
                <div style={{ fontSize: 11, color: 'var(--fg-faint)' }}>in 47 seconds</div>
              </div>
            </div>

            {/* Floating chip: share — sits below-right, outside phone */}
            <div className="card" style={{
              position: 'absolute', bottom: 16, right: -100,
              padding: '10px 14px', borderRadius: 12,
              display: 'flex', alignItems: 'center', gap: 10,
              boxShadow: 'var(--shadow-md)',
              animation: 'float-y 5.5s ease-in-out infinite 0.5s',
              background: 'var(--card-solid)',
              whiteSpace: 'nowrap',
              zIndex: 3,
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: 8,
                background: 'var(--bg-soft)', color: 'var(--fg)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name="share" size={14} />
              </div>
              <div>
                <div style={{ fontSize: 12, fontWeight: 600 }}>One link to share</div>
                <div style={{ fontSize: 11, color: 'var(--fg-faint)' }}>WhatsApp · SMS · Email</div>
              </div>
            </div>
          </div>
        </div>

        {/* Trust strip */}
        <div className="hero-trust-strip" style={{
          marginTop: 96,
          paddingTop: 32,
          borderTop: '1px solid var(--line)',
          display: 'flex',
          alignItems: 'center',
          gap: 48,
          flexWrap: 'wrap',
        }}>
          <div style={{ fontSize: 12, color: 'var(--fg-faint)', fontFamily: 'Geist Mono', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
            Trusted by specialists at
          </div>
          <div style={{ display: 'flex', gap: 56, flexWrap: 'wrap', alignItems: 'center', flex: 1 }}>
            {['Riverside Oral Surgery', 'North Hill Perio', 'Mapleton Endodontics', 'Crescent Implant Centre', 'Cedar & Quill DDS'].map((n) => (
              <div key={n} style={{
                fontFamily: 'Instrument Serif', fontSize: 18, color: 'var(--fg-mute)',
                letterSpacing: '-0.01em',
              }}>{n}</div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Hero, HeroPhone });