// Ecosystem section — device switcher
const PhoneFrame = ({ children }) => (
  <div className="relative mx-auto rounded-[34px] bg-ink p-2 device-shadow" style={{ width: 220, aspectRatio: '9/19.5' }}>
    <div className="absolute top-2 left-1/2 -translate-x-1/2 w-20 h-5 rounded-full bg-ink z-10" />
    <div className="w-full h-full rounded-[28px] bg-paper overflow-hidden relative">{children}</div>
  </div>
);

const TabletFrame = ({ children }) => (
  <div className="relative mx-auto rounded-[24px] bg-ink p-2 device-shadow" style={{ maxWidth: 460, width: '100%', aspectRatio: '4/3' }}>
    <div className="w-full h-full rounded-[18px] bg-paper overflow-hidden relative">{children}</div>
  </div>
);

const DesktopFrame = ({ children }) => (
  <div className="relative mx-auto" style={{ maxWidth: 560, width: '100%' }}>
    <div className="rounded-t-2xl bg-ink p-2 device-shadow">
      <div className="w-full rounded-t-xl bg-paper overflow-hidden relative" style={{ aspectRatio: '16/10' }}>
        <div className="absolute top-0 left-0 right-0 h-5 bg-paper2 border-b hairline flex items-center px-3 gap-1.5">
          <span className="w-2 h-2 rounded-full bg-ink3/30" />
          <span className="w-2 h-2 rounded-full bg-ink3/30" />
          <span className="w-2 h-2 rounded-full bg-ink3/30" />
        </div>
        <div className="absolute inset-0 pt-5">{children}</div>
      </div>
    </div>
    <div className="mx-auto bg-gradient-to-b from-ink to-ink2 h-2 rounded-b-md" style={{ width: '70%' }} />
    <div className="mx-auto bg-ink2 h-1 rounded-full mt-px" style={{ width: '34%' }} />
  </div>
);

const NotebookContent = ({ size = 'md' }) => {
  const big = size === 'lg';
  const sm = size === 'sm';
  return (
    <div className="absolute inset-0 p-3 flex flex-col">
      <div className="flex items-center justify-between text-[8px] font-mono uppercase tracking-[0.14em] text-ink3 mb-2">
        <span>Field Journal</span>
        <span>{sm ? '·' : '120 Hz · synced'}</span>
      </div>
      <div className={"font-semibold tracking-tightest text-ink leading-[1] " + (big ? "text-[28px]" : sm ? "text-[12px]" : "text-[20px]")}>
        Tuesday<br />morning,<br />notes.
      </div>
      <svg viewBox="0 0 200 90" className="mt-2 w-full">
        <g stroke="oklch(0.92 0.005 280)" strokeWidth="0.6">
          <line x1="0" x2="200" y1="20" y2="20" />
          <line x1="0" x2="200" y1="40" y2="40" />
          <line x1="0" x2="200" y1="60" y2="60" />
          <line x1="0" x2="200" y1="80" y2="80" />
        </g>
        <g fill="none" stroke="#B8941F" strokeWidth="1.4" strokeLinecap="round">
          <path d="M 8 18 Q 18 10, 28 16 T 50 14 M 56 18 Q 70 8, 84 18" />
          <path d="M 8 38 Q 24 30, 40 36 T 70 36 Q 84 30, 96 38" />
          <path d="M 8 58 Q 18 52, 32 56 T 60 56" />
          <rect x="120" y="10" width="60" height="60" rx="2" stroke="#B8941F" />
        </g>
      </svg>
    </div>
  );
};

const Ecosystem = () => {
  const [device, setDevice] = React.useState('tablet');
  return (
    <section id="ecosystem" className="relative py-24 md:py-32">
      <div className="mx-auto max-w-[1240px] px-6">
        <SectionLabel>04 · Ecosystem</SectionLabel>

        <div className="reveal flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-14">
          <h2 className="text-ink font-semibold tracking-tightest leading-[0.95] text-[44px] md:text-[68px] max-w-[18ch]">
            One notebook,<br />three surfaces.
          </h2>
          <p className="max-w-md text-[17px] leading-[1.55] text-ink2">
            Inkly is built natively for each platform — same ink, same hand, every device. Pick one up, finish a thought, set it down.
          </p>
        </div>

        {/* Switcher */}
        <div className="reveal flex items-center justify-center mb-12">
          <div className="inline-flex items-center bg-paper2 border hairline rounded-full p-1">
            {[
              { k: 'phone', label: 'Phone', icon: 'smartphone' },
              { k: 'tablet', label: 'Tablet', icon: 'tablet' },
              { k: 'desktop', label: 'Web (PWA)', icon: 'monitor' },
            ].map(d => (
              <button
                key={d.k}
                onClick={() => setDevice(d.k)}
                className={"flex items-center gap-2 px-5 py-2 rounded-full text-[13px] font-medium transition-all " + (device === d.k ? "bg-ink text-paper" : "text-ink2 hover:text-ink")}
              >
                <Icon name={d.icon} size={14} strokeWidth={1.7} />
                {d.label}
              </button>
            ))}
          </div>
        </div>

        {/* Stage */}
        <div className="reveal relative h-[520px] md:h-[600px] rounded-3xl bg-gradient-to-b from-paper2 to-paper border hairline overflow-hidden flex items-center justify-center">
          <div className="absolute inset-0 paper-grid opacity-60 pointer-events-none" />
          <div className="relative z-10 flex items-center justify-center w-full">
            {device === 'phone' && <div className="transition-all duration-500"><PhoneFrame><NotebookContent size="sm" /></PhoneFrame></div>}
            {device === 'tablet' && <div className="transition-all duration-500"><TabletFrame><NotebookContent size="md" /></TabletFrame></div>}

            {device === 'desktop' && <div className="transition-all duration-500"><DesktopFrame><NotebookContent size="lg" /></DesktopFrame></div>}
          </div>

          {/* meta strip */}
          <div className="absolute bottom-0 left-0 right-0 grid grid-cols-3 border-t hairline bg-paper/80 backdrop-blur">
            {[
              ['Made for', 'Quick capture on the go', 'Long writing sessions', 'Reviewing & sharing'],
              ['Write with', 'Finger or any stylus', 'S Pen or active stylus', 'Type, mouse, or wired tablet'],
              ['Always with you', 'In your pocket', 'On the desk, on the couch', 'Open in any browser'],
            ].map(([label, ph, tb, dk]) => (
              <div key={label} className="p-4 md:p-5 border-l first:border-l-0 hairline">
                <div className="text-[10px] font-mono uppercase tracking-[0.18em] text-ink3">{label}</div>
                <div className="mt-1.5 text-[13.5px] text-ink">
                  {device === 'phone' ? ph : device === 'tablet' ? tb : dk}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.Ecosystem = Ecosystem;