const GoldenRatioLayout = () => {
  const [useGoldenRatio, setUseGoldenRatio] = useState(true);

  // 黄金比 φ
  const PHI = 1.618;

  // Base sizes
  const baseFontSize = 16;
  const containerWidth = 100; // %

  // Calculated sizes
  const mainWidth = useGoldenRatio ? 61.8 : 50; // 黄金比 vs 50:50
  const sideWidth = 100 - mainWidth;
  
  const h1Size = useGoldenRatio ? baseFontSize * PHI * PHI : baseFontSize * 1.5; // ~42px vs 24px
  const h2Size = useGoldenRatio ? baseFontSize * PHI : baseFontSize * 1.25;      // ~26px vs 20px

  return (
    <div className="bg-muted/30 p-6 rounded-xl font-sans">
      <div className="flex justify-between items-center mb-6">
        <h3 className="text-sm font-bold text-muted-foreground uppercase tracking-widest">Layout Harmony Demo</h3>
        <button
          onClick={() => setUseGoldenRatio(!useGoldenRatio)}
          className={`px-4 py-2 rounded-lg text-sm font-bold transition-colors ${
            useGoldenRatio ? 'bg-yellow-500 text-yellow-950 shadow-lg' : 'bg-muted text-muted-foreground'
          }`}
        >
          {useGoldenRatio ? '✨ Golden Ratio Applied' : 'No Ratio (Arbitrary)'}
        </button>
      </div>

      <div className="flex flex-col md:flex-row gap-4 h-64 transition-all duration-500 ease-in-out">
        {/* Main Content */}
        <div 
          className="bg-card p-6 shadow-sm rounded-lg transition-all duration-500 ease-in-out border-t-4 border-yellow-400 overflow-hidden"
          style={{ flexBasis: `${mainWidth}%` }}
        >
          <h1 
            className="font-bold text-card-foreground mb-4 transition-all duration-500 leading-tight"
            style={{ fontSize: `${h1Size}px` }}
          >
            Golden Heading
          </h1>
          <p className="text-muted-foreground leading-relaxed" style={{ fontSize: `${baseFontSize}px` }}>
            The main content area takes up significant space. {useGoldenRatio ? 'Around 62%' : 'Around 50%'} of the width. Notice how the heading size relates to the body text.
          </p>
        </div>

        {/* Sidebar */}
        <div 
          className="bg-primary/10 p-6 shadow-sm rounded-lg transition-all duration-500 ease-in-out border-t-4 border-blue-400"
          style={{ flexBasis: `${sideWidth}%` }}
        >
          <h2 
            className="font-bold text-foreground mb-4 transition-all duration-500"
            style={{ fontSize: `${h2Size}px` }}
          >
            Sidebar
          </h2>
          <div className="space-y-2">
            <div className="h-2 bg-blue-200 rounded w-3/4"></div>
            <div className="h-2 bg-blue-200 rounded w-full"></div>
            <div className="h-2 bg-blue-200 rounded w-5/6"></div>
          </div>
        </div>
      </div>

      <div className="mt-4 text-xs text-center text-muted-foreground">
        {useGoldenRatio 
          ? `Main: ${mainWidth}% | Side: ${sideWidth.toFixed(1)}% | Ratio: 1 : 1.618`
          : `Main: 50% | Side: 50% | Ratio: 1 : 1`}
      </div>
    </div>
  );
};

render(<GoldenRatioLayout />);